
//设置当前选择的页面图
//建立连接线 -呼起 输出参数名 和 输入参数名
//创建组件
//绘制当前页面的界面
//_this.data.新增组件
///---------------绘制连接线的函数-------------------//

// {
//   1:{base_info:{},dict:{xx}}
// }

let ________getQueryParams=function() {  
  const queryParams = {};  
  const urlParams = new URLSearchParams(window.location.search);  
  for (const [key, value] of urlParams.entries()) {  
      queryParams[key] = value;  
  }  
  return queryParams; 
}  
window.a_1_0_4_5_1_create_temp=async function(obj){
  let ffffather_id=obj.father_id;
  console.log("father_id############test1",ffffather_id)
  await obj._this.now_dom_dct[ffffather_id].vue.$nextTick(() => {
    console.log("father_id############test2",ffffather_id)
    a_1_0_4_5_1_create_temp2(obj);
    console.log("father_id############test3",ffffather_id)
  }) 
}
window.a_1_0_4_5_1_create_temp2=function(obj){
  let 组件__only_id=obj.唯一id;
  let 组件id=obj.组件id;
  let 组件数据=obj.数据;
  let info=JSON.parse(JSON.stringify(组件数据.base_info));
  let _this=obj._this;
  if(_this.now_dom_dct[组件id]){return}
  let before_id=obj.before_id;
  let ref_val=obj.ref_val;
  let father_id=obj.father_id;
  //创建组件
  let new_dom=document.createElement(info.temp_id+'_'+info.version);
  for (let k in info){
    if (k!='data'){
      new_dom.setAttribute(k,info[k]);
    }
  }
  new_dom.id=组件__only_id;//`id_${项目所有者id}_${项目目录id}_${项目id}_${页面id}_${组件id}`;
  new_dom.setAttribute('dom_id',组件id);//${组件id}`;
  new_dom.setAttribute('ref','ref_obj');//设置ref
  let deepcopy_data=JSON.parse(JSON.stringify(info.data||{}));
if (before_id) {
  console.log("father_id",father_id)
  console.log("now id",组件id)
  if(!_this.now_dom_dct[father_id].vue.return_slot_dom){
    _this.now_dom_dct[father_id].vue.$refs[ref_val].insertBefore(new_dom,_this.now_dom_dct[before_id].dom);
  }else{
    let father_d=_this.now_dom_dct[father_id].vue.return_slot_dom(ref_val);
    father_d.insertBefore(new_dom,_this.now_dom_dct[before_id].dom);
  }
} else {
  console.log("father_id2",father_id)
  console.log("now id2",组件id)
  if(!_this.now_dom_dct[father_id].vue.return_slot_dom){
    _this.now_dom_dct[father_id].vue.$refs[ref_val].appendChild(new_dom);
  }else{
    let father_d=_this.now_dom_dct[father_id].vue.return_slot_dom(ref_val);
    father_d.appendChild(new_dom);
  }
  // 如果 child_dom 是 null，则将新元素添加到 father_dom 的末尾
}
// console.log("新增组件2")
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null}};
//如果使用了vuetify 那么添加进来
if(info.use_vue){
  for(let i=0;i<info.use_vue.length;i++){
    vue_dct[info.use_vue[i]]=window[info.use_vue[i]];
  }
}
// //设置vue传入参数
new_dom.setAttribute(':deepcopy_data',"deepcopy_data");
deepcopy_data.edit_flag=true;//设置为编辑属性
vue_dct.data.deepcopy_data=deepcopy_data;
let new_vue=new Vue(vue_dct);
let new_vue2=new_vue.$refs.ref_obj;
_this.now_dom_dct[组件id]={'dom':new_vue2.$el,"vue":new_vue2,'father_id':father_id,'ref_val':ref_val}

}


window.a_1_0_4_5_1_create=async function(obj){


let 容器=obj.容器;
let 页面id=obj.页面id;
let 配置=obj.配置;
let _this=obj._this;
console.log("显示页面-","1:整理页面数据");
let 整理后的数据格式={};
let 当前页面的数据=JSON.parse(JSON.stringify(配置.page_config.dict[1].dict[页面id].dict[1].page_dict[1].dict));
//遍历节点 生成
let k_lst=Object.keys(当前页面的数据).reverse();

for(let i=k_lst.length-1;i>=0;i--){
  let k=k_lst[i];
  let 组件数据=当前页面的数据[k];
  console.log("组件数据:",i,组件数据)
  //判断组件是是否是根组件 //是否是容器的子节点【不是孙子节点】
  if(组件数据.base_info.father_id=='-1'){
    整理后的数据格式[k]=组件数据;
  }else{
    当前页面的数据[组件数据.base_info.father_id].dict[k]=组件数据;
  }
  }
console.log('\t\t',整理后的数据格式)
console.log("显示页面-","2:清空容器内所有的dom节点");
容器.innerHTML="";
console.log("显示页面-","3:依次生成节点");

  let project_info=________getQueryParams();//获取项目信息
  let 项目所有者id=project_info.user_id;
  let 项目目录id=project_info.project_dir;
  let 项目id=project_info.project_id;
  let create_lst=[{base_info:{con_dct:配置.page_config.dict[页面id].dict[1].dict[1].base_info.con_dct},dict:整理后的数据格式}];//要加载的组件
  while(create_lst.length){
    let 临时数据=create_lst.pop();
    let con_dct=临时数据.base_info.con_dct;
    for(let ref_name in con_dct){
      let 
    }
    await a_1_0_4_5_1_create_temp({
      唯一id:`id_${项目所有者id}_${项目目录id}_${项目id}_${页面id}_${k}`,
      组件id:k,
      数据:临时数据,
      _this:_this,
      before_id:null,
      ref_val:临时数据.ref,
    })
    if(临时数据.base_info.con){

    }
  }
console.log("显示页面-","1:清空容器内所有的dom节点");
}


window.a_1_0_4_5_1_create=async function(obj){

let 页面id=obj.页面id;
let 配置=obj.配置;
let _this=obj._this;
let 当前页面的数据=JSON.parse(JSON.stringify(配置.page_config.dict[1].dict[页面id].dict[1].page_dict));
let base_node={};//根节点
for(let k in 当前页面的数据){
  let 数据=当前页面的数据[k];
  if (数据.base_info.father_id=='-1'){
    base_node[k]=数据;
  }
}
  let project_info=________getQueryParams();//获取项目信息
  let 项目所有者id=project_info.user_id;
  let 项目目录id=project_info.project_dir;
  let 项目id=project_info.project_id;
  let 初始数据=JSON.parse(JSON.stringify(配置.page_config.dict[1].dict[页面id].dict[1]));
  
  初始数据.__临时id__="-1";
  let create_lst=[初始数据];//要加载的组件
  while(create_lst.length){
    let 临时数据=create_lst.pop();
    let con_dct=临时数据.base_info.con_dct;
    for(let ref_name in con_dct){
      let ref_lst=con_dct[ref_name].reverse();
      let before_id=null;
      for (let i=0;i<ref_lst.length;i++){
        let 组件id=ref_lst[i];
        let create_obj={
          唯一id:`id_${项目所有者id}_${项目目录id}_${项目id}_${页面id}_${组件id}`,
          组件id:组件id,
          数据:当前页面的数据[组件id],
          _this:_this,
          before_id:before_id,
          ref_val:ref_name,
          father_id:临时数据.__临时id__||"-1"
        };
        console.log("加载 1",create_obj)
        await a_1_0_4_5_1_create_temp(create_obj);
        console.log("加载 2",create_obj)
        before_id=组件id; 
        console.log("加载 3",临时数据,临时数据.base_info.con)
        if(当前页面的数据[组件id].base_info.con){
          
          当前页面的数据[组件id].__临时id__=组件id;
          create_lst.push(当前页面的数据[组件id]);
          console.log("加载 4",create_lst)
        }
      }
    }
  }
}
/*
a_1_0_4_5_1_create({
  页面id:1,
  配置:全局配置对象.update_obj.data,
  _this:前端可视化编辑界面.return_this()
})
  */
Vue.component2('a_1_0_4_5_1button',{
  template:`
  <div style="padding:7.5px"
      @mouseenter="handleMouseEnter"  
      @mouseleave="handleMouseLeave">

      <button ref="range" class="a_1_0_4_5_1button" @click="change_val">{{data.hovertext}}</button>

        <div class="a_1_0_4_5_1_sub_menu" :style="hovertext_style">
            <div class="a_1_0_4_5_1_sub_menu_item" ref="text">
              {{data.name}}:{{data.hovertext}}
            </div>
        </div>


  </div>
  `, 
  data() {
      return {
        refresh:"1",
        show_flag:true,
        hover_flag:false,
        style:{},
        hovertext_style:"top:-100;visibility:hidden;",
        style2:"",
        data:{
            test:false,
            val:100,
            add_show:true,
            icon_class:"",//图标类
            icon_color:"rgba(231, 231, 231, 0.6)",//图标颜色
            background:"#212121",//背景颜色
            hovercolor:"#ffffff",//高亮颜色
            name:"宽度:",
            hovertext:"2000px",//移动到位后的提示文字
            click:null,//点击触发函数
        }
      };
  },
  watch:{
  },
  methods:{
    
    change_val:function(){
      let _this=this;
      _this.$prompt('修改'+this.data.name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        try{_this.showValue(value);}
        catch (err){
            console.log("出错..",err)
        }
        
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    
    
    accumulateParentOffsets:function (targetElement) {  
    let currentElement = targetElement;  
    let totalLeft = 0;  
    let totalTop = 0;  
  
    while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {  
        const computedStyle = window.getComputedStyle(currentElement);  
          
        if (computedStyle.position === 'relative') {  
            // 注意：offsetLeft 和 offsetTop 给出的是相对于最近的定位祖先的偏移  
            // 在这里，我们假设没有其他的定位祖先（或它们不影响我们的计算）  
            // 因为我们只关心 relative 定位的父元素  
            totalLeft += currentElement.offsetLeft;  
            totalTop += currentElement.offsetTop;  
        }  
  
        currentElement = currentElement.parentElement;  
    }  
  
    return { left: totalLeft, top: totalTop };  
} ,
    showValue(val){
      this.data.val=val;
      this.data.hovertext=val+'px';
      try{this.data.callback(this.data.val)}catch{};
    },
    get_rect(){
      let rect=this.$refs.range.getBoundingClientRect();

  // console.log('Top:', rect.top);
  // console.log('Left:', rect.left);
  // console.log('Bottom:', rect.bottom);
  // console.log('Right:', rect.right);
  // console.log('Width:', rect.width);
  // console.log('Height:', rect.height);
      return rect
    },
    handleMouseEnter(){  
        if(this.hover_flag==false){
            this.hover_flag=true; 
            let rect=this.get_rect();
            let oobj=this.accumulateParentOffsets(this.$refs.range);
            this.hovertext_style=`top:${rect.top-oobj.top-40};left:${rect.left-oobj.left}`;
        }
      },  
      handleMouseLeave() {  
        if(this.hover_flag==true){
            this.hover_flag=false; 
            this.hovertext_style="top:-100;visibility:hidden;";
        }
      } ,
  },
  mounted:function(){
} }
);


Vue.component2('a_1_0_4_5_1button2',{
  template:`
  <div >

      <button ref="range" class="a_1_0_4_5_1button" @click="click_func">{{data.name}}</button>



  </div>
  `, 
  data() {
      return {
        data:{
          click:null,
            name:"运行控制",
        }
      };
  },
  watch:{
  },
  methods:{
    click_func:function(){
      let _this=this;
      try{this.data.click();}catch{}
    }
  },
  mounted:function(){
} }
);


function a_1_0_4_5_1_get_div() { 
	let res=document.getElementById("a_1_0_4_5_1");
    if(!res){
    res = document.createElement('div');  
    res.id = 'a_1_0_4_5_1'; // 为div设置一个唯一的ID  
    
    res.style.visibility = 'hidden'; // 初始设置为隐藏，但不影响尺寸计算  
    res.style.position = 'absolute'; // 设置为绝对定位，避免影响其他元素布局（可选） 
    res.style.display = 'none'; //隐藏 
    document.body.appendChild(res);
    }
      
    return res;  
}  
  
// 通过传参设置div的样式，并输出div的高度和宽度  
function a_1_0_4_5_1_get_wh(obj) {  
    let styles=obj.styles||{};
    let class_=obj.class||'';
    let context=obj.context||'';
    let res=a_1_0_4_5_1_get_div();
    
    // 清除除visibility和position之外的所有样式  
    for (let style in res.style) {  
        if (style !== 'visibility' && style !== 'position' ) { 
            res.style.removeProperty(style);  
        }  
    }  
    res.style.visibility = 'hidden'; // 初始设置为隐藏，但不影响尺寸计算  
    res.style.position = 'absolute'; // 设置为绝对定位，避免影响其他元素布局（可选） 
    // 设置div的样式  
    for (let property in styles) {  
        if (styles.hasOwnProperty(property)) {  
            res.style[property] = styles[property];  
        }  
    }  
    res.className=class_;
    res.textContent=context;
    // 获取div的高度和宽度（包括padding和border，但不包括margin）  
    let height = res.offsetHeight;  
    let width = res.offsetWidth;  
  
    res.style.display = 'none'; //隐藏
    // 输出高度和宽度  
    console.log(`Div的高度: ${height}px`);  
    console.log(`Div的宽度: ${width}px`);  
  
    return { height:height, width:width }; // 返回高度和宽度（可选）  
}  
  
// 使用示例  
// a_1_0_4_5_1_get_wh({
// styles:{
//     backgroundColor: 'lightblue',  
//     border: '1px solid black',  
//     padding: '10px'
// },
// context:'33333',
// class:'ddd'
// });
////----------------------绘制右击菜单---------start------------/////////
window.a_1_0_4_5_1_dom=null;//表示菜单的dom
window.a_1_0_4_5_1_vue=null;//表示菜单的dom
window.a_1_0_4_5_1_show_menu=function(obj){

let x=null;
let y=null;
if(obj.event){
    x=obj.event.clientX;
    y=obj.event.clientY;
}else{
    x=obj.x;
    y=obj.y;
}
let deepcopy_data={"menu_dct":obj.menu_dct,'keys':Object.keys(obj.menu_dct).sort(),x:x,y:y}
//如果菜单不存在则创建一个菜单
if(!a_1_0_4_5_1_dom){
let new_dom=document.createElement('a_1_0_4_5_1_menu');
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
new_dom.setAttribute(':deepcopy_data','deepcopy_data');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:deepcopy_data}};
// 将这个 div 添加到 document.documentElement（即 <html> 元素）  
document.documentElement.appendChild(new_dom);
//渲染vue组件
window.a_1_0_4_5_1_vue=new Vue(vue_dct);
window.a_1_0_4_5_1_dom=new_dom;

document.addEventListener('click', function(event) {
  // Check if the clicked element is not doma and not a descendant of doma
  if (!window.a_1_0_4_5_1_vue.$refs.ref_obj.$el.contains(event.target)) {
      window.a_1_0_4_5_1_vue.$refs.ref_obj.show_flag=false;
  }
});
}else{
    window.a_1_0_4_5_1_vue.$refs.ref_obj.data.keys=Object.keys(obj.menu_dct).sort();
    window.a_1_0_4_5_1_vue.$refs.ref_obj.data.menu_dct=obj.menu_dct;
    window.a_1_0_4_5_1_vue.$refs.ref_obj.data.x=x;
    window.a_1_0_4_5_1_vue.$refs.ref_obj.data.y=y;
    window.a_1_0_4_5_1_vue.$refs.ref_obj.data.refresh();
    window.a_1_0_4_5_1_vue.$refs.ref_obj.show_flag=true;

}

}


Vue.component2('a_1_0_4_5_1_menu', {  
    template: `
       
        <div class="a_1_0_4_5_1_sub_menu" :style="lefttop" :key='refresh' v-show='show_flag'>
            <div class="a_1_0_4_5_1_sub_menu_item" ref="text"v-for="(key,indexr) in data.keys" @click="click($event,key)">
                {{data.menu_dct[key].text}}
            </div>
        </div>
`,
data(){
    return{
        show_flag:true,
        refresh:'1',
        lefttop:'color:red',
        data:{
            menu_dct:{
            },
            keys:{},
            x:'33',
            y:'33',
        }
    }
},
watch:{
    
    "data.x":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.y":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
},
methods:{
    
    click:function(event,key){
        this.data.menu_dct[key].click(event);
        this.show_flag=false;
    },
},

mounted:function(){
_this.data.refresh=function(){_this.refresh='2'?'1':'2'};
_this.data.keys=_this.deepcopy_data.keys;
_this.data.x=_this.deepcopy_data.x;
_this.data.y=_this.deepcopy_data.y;
_this.data.menu_dct=_this.deepcopy_data.menu_dct;_this.data.refresh();
}

})

// a_1_0_4_5_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     x:444,y:444,
// }
// )

// a_1_0_4_5_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"3删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"4查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     event:{clientX:333,clientY:555}
// }
// )
////----------------------绘制右击菜单-------end--------------/////////

//-------------------------绘制 组件按钮-------start--------------//
Vue.component2('a_1_0_4_5_1_buttonx', {  
    template: `
        <div  class="a_1_0_4_5_1_class6" :style="lefttop"
        v-if="data.id_"
        @mousedown="mouse_down2"
        @mouseup="mouse_up2"
        :key="refresh"
        >
            <div 
            
        :class="{
        'a_1_0_4_5_1_class1':data.true,
        
        'a_1_0_4_5_1_click_out_button':data.out_flag,
    'a_1_0_4_5_1_click_in_button': data.in_flag,
        }"
            
            >
        
        <span  style="color:#bcbcbc" :key="refresh2">{{data.father.page_dict[data.id_].name}}</span>



        
        <!-- 入参 上圆 -->
        <svg 
        入参
        class="a_1_0_4_5_1_class2"
        @mousedown="mouse_down__"
        @mouseup="mouse_up1" 
        :style="data.circle_style1"  width="12" height="12">
        <circle cx="6" cy="6" r="4" fill="none" stroke="#FFFFFF" style="" stroke-width="1"></circle></svg>
        
        <!-- 出参 下圆 -->
        <svg 
        出参
        class="a_1_0_4_5_1_class3"
        @mousedown="mouse_down1"
        :style="data.circle_style2" width="12" height="12">
        <circle cx="6" cy="6" r="4" fill="none" stroke="#FFFFFF" style="" stroke-width="1"
        
        ></circle></svg>
        
        <!-- 进程id-->
        <svg 
        进程id
        width="24" height="24"
        
        :class="{
        'a_1_0_4_5_1_class4':data.true,
        
        'a_1_0_4_5_1_success1':data.father.process_dct[data.father.page_dict[data.id_].process_id],
    'a_1_0_4_5_1_error1': !data.father.process_dct[data.father.page_dict[data.id_].process_id],
        }"
        
        :style="data.circle_style3">
        <circle cx="12" cy="12" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>
    
    
        <text x="7" y="17" fill="white" style="font-size: 15px; font-family: Arial;">
{{data.father.page_dict[data.id_].process_id}}</text> </svg>
    
    <!-- 函数类型  显示tree_type的圈圈0(绿色)表示被动执行的函数(如 def a():return 1) 1(橙色)表示需要触发执行的函数(如接收http请求的函数)-->
    <svg 
    函数类型
    width="24" height="24"
    
    :class="{
        'a_1_0_4_5_1_class5':data.true, 
        'a_1_0_4_5_1_success2': data.father.page_dict[data.id_].tree_type=='0',
    'a_1_0_4_5_1_error2': data.father.page_dict[data.id_].tree_type=='1',
    }"
    
    :style="data.circle_style4">
    <circle cx="12" cy="12" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>
    </svg>
        </div>



        </div>
`,
data(){
    return{
      refresh:'1',
      refresh2:'3',
        lefttop:'',
        data:{
          out_flag:false,
          in_flag:false,
            id_:null,
            father:{},
            true:true,
            process_dct2:{54:"mqtt进程"},
            process_dct:{45:"mqtt进程"},
            process_id:"",
            circle_style1:'',
            circle_style2:'',
            circle_style3:'',
            circle_style4:'',
            circle_style_left:'',
            name:"",
            key:'',
            x:'',
            y:'',
        }
    }
},
watch:{
    "data.x":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.y":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.name":function(e){
        let obj=a_1_0_4_5_1_get_wh({
            'context':this.data.father.page_dict[this.data.id_].name,
            'class':"a_1_0_4_5_1_class1 ddd"
        });
        let width=obj.width;
        this.data.circle_style1=`left:${width/2-6}px`;
        this.data.circle_style2=`left:${width/2-6}px`;
        this.data.circle_style_left=width/2-6;
    }
},

methods:{
  refresh2_func:function(){
    
    this.refresh2=this.refresh2==='4'?'3':'4'},
  refresh_func:function(){
    
    let obj=a_1_0_4_5_1_get_wh({
      'context':this.data.father.page_dict[this.data.id_].name,
      'class':"a_1_0_4_5_1_class1 ddd"
  });
  let width=obj.width;
  this.data.circle_style1=`left:${width/2-6}px`;
  this.data.circle_style2=`left:${width/2-6}px`;
  this.data.circle_style_left=width/2-6;
    this.refresh=this.refresh==='2'?'1':'2'},
  return_circle_xy1:function(){
    return {x:this.data.x+this.data.circle_style_left,y:this.data.y-12}
  },
  return_circle_xy2:function(){
    return {x:this.data.x+this.data.circle_style_left,y:this.data.y+24}
  },
  
     mouse_down__:function(event){
      event.stopPropagation();
     },
     mouse_up__:function(event){
      event.stopPropagation();
     },
    mouse_up1:function(event){
      let data=this.data.father_data.全局鼠标操作对象1.get_data({key:"绘制当前连线"})
        try{ if (!data.write_flag){return}}catch{return}
       
      let xy=this.return_circle_xy1();
        console.log("上圆 释放鼠标")
        this.data.father_data.建立连接线({
          key:this.data.key
        });
        event.stopPropagation();
    },
    mouse_down1:function(event){
      let xy=this.return_circle_xy2();
        this.data.father_data.全局鼠标操作对象1.set_data({
          key:"绘制当前连线",
          data:{key:this.data.key,
            x1:xy.x,y1:xy.y,
            write_flag:true
          }
      });
        this.data.father_data.显示当前绘制的连线(event);


        this.data.father_data.全局鼠标操作对象1.set_move({
          key:"绘制当前连线",
          key2:"绘制当前连线move",
          func:this.data.father_data.移动当前绘制的连线,
      });
      this.data.father_data.全局鼠标操作对象1.set_up({
          key:"绘制当前连线",
          key2:"绘制当前连线up",
          func:this.data.father_data.隐藏当前绘制的连线,
      });

        event.stopPropagation();
    },
    mouse_up2:function(event){
      if ( this.button_2_flag){
        if(this.button_2.x==event.clientX && this.button_2.y==event.clientY){
          this.click(event);
        }
      }
      else if(this.button_1_flag){
        if(this.button_1.x==event.clientX && this.button_1.y==event.clientY){
          this.data.father_data.选择组件(this.data.key);
        }
      }
  },
    move_mouse:function(){

    },
    
    mouse_down2:function(event){
      if (event.button === 2) {
        // 如果是右键，阻止进一步处理
        this.button_2={'x':event.clientX,'y':event.clientY}
        this.button_2_flag=true;
        this.button_1_flag=false;
        return;
    }
    this.button_2_flag=false;
    this.button_1_flag=true;
    this.button_1={'x':event.clientX,'y':event.clientY}
    this.button_2=null;
      this.data.father_data.全局鼠标操作对象1.set_move({
        key:"移动前端组件",
        key2:"移动前端组件move",
        func:this.data.father_data.移动前端组件move,
    });
    this.data.father_data.全局鼠标操作对象1.set_up({
        key:"移动前端组件",
        key2:"移动前端组件up",
        func:this.data.father_data.移动前端组件up,
    }); 
    this.data.father_data.全局鼠标操作对象1.set_data({
        key:"移动前端组件",
        data:{key:this.data.key,
          x:this.data.x,y:this.data.y,
          mousex:event.clientX,mousey:event.clientY}
    });
  },
  change_name:function(_this){
    this.$prompt('修改组件名称', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(({ value }) => {
      
      _this.data.father_data.修改组件名称(_this.data.key,value);
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消输入'
      });       
    });
  },
  click:function(event){
    let _this=this;
    a_1_0_4_5_1_show_menu({
      event:event,
      menu_dct:{
        
        0:{
          text:"改名",
          click:function(event){
            _this.change_name(_this);
          }
        },
        1:{
          text:"删除",
          click:function(event){
            _this.data.father_data.删除组件(_this.data.key);
          }
        }
      }
    })
  }
},

mounted:function(){

}

})
window.a_1_0_4_5_1_dom_dct={};
window.a_1_0_4_5_1_add=function(obj){
let father_dom=obj.father_dom||obj._this.$refs[obj.father_ref];
let vue_name=obj.vue_name;
//新建一个dom
let new_dom=document.createElement(vue_name);
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null}};
//设置vue传入参数
if(obj.deepcopy_data){new_dom.setAttribute(':deepcopy_data',"deepcopy_data");vue_dct.data.deepcopy_data=obj.deepcopy_data;}
//插入dom
father_dom.appendChild(new_dom);  
//渲染vue组件
let new_vue=new Vue(vue_dct);
//获取到刚才渲染的vue对象
let new_vue2=new_vue.$refs.ref_obj;
//加入快速访问中
if(obj.key){window.a_1_0_4_5_1_dom_dct[obj.key]={'dom':new_dom,"vue":new_vue2,'father_dom':father_dom}}

}
window.a_1_0_4_5_1_refresh_all=function(){
  for(let k in window.a_1_0_4_5_1_dom_dct){
    window.a_1_0_4_5_1_dom_dct[k].vue.refresh_func();
  }
}
window.a_1_0_4_5_1_del=function(key){
window.a_1_0_4_5_1_dom_dct[key].father_dom.removeChild(window.a_1_0_4_5_1_dom_dct[key].vue.$el);
delete window.a_1_0_4_5_1_dom_dct[key];
}
window.a_1_0_4_5_1_clear=function(){
  window.a_1_0_4_5_1_dom_dct={};
}

//----------------绘制连接线的函数end---------------//
Vue.component2('a_1_0_4_5_1_input_range',{
  template:`
  <div 
      @mouseenter="handleMouseEnter"  
      @mouseleave="handleMouseLeave">


  <input ref="range"class="a_1_0_4_5_1inputrange"type="range" min="1" max="200" step="1" value="100" @input="showValue">


        <div class="a_1_0_4_5_1_sub_menu" :style="hovertext_style">
            <div class="a_1_0_4_5_1_sub_menu_item" ref="text">
               缩放比:100%
            </div>
        </div>


  </div>
  `, 
  data() {
      return {
        refresh:"1",
        show_flag:true,
        hover_flag:false,
        style:{},
        hovertext_style:"top:-100;visibility:hidden;",
        style2:"",
        data:{
            test:false,
            val:100,
            add_show:true,
            callback:null,
            icon_class:"",//图标类
            icon_color:"rgba(231, 231, 231, 0.6)",//图标颜色
            background:"#212121",//背景颜色
            hovercolor:"#ffffff",//高亮颜色
            hovertext:"缩放比:100%",//移动到位后的提示文字
            click:null,//点击触发函数
        }
      };
  },
  watch:{
  },
  methods:{accumulateParentOffsets:function (targetElement) {  
    let currentElement = targetElement;  
    let totalLeft = 0;  
    let totalTop = 0;  
  
    while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {  
        const computedStyle = window.getComputedStyle(currentElement);  
          
        if (computedStyle.position === 'relative') {  
            // 注意：offsetLeft 和 offsetTop 给出的是相对于最近的定位祖先的偏移  
            // 在这里，我们假设没有其他的定位祖先（或它们不影响我们的计算）  
            // 因为我们只关心 relative 定位的父元素  
            totalLeft += currentElement.offsetLeft;  
            totalTop += currentElement.offsetTop;  
        }  
  
        currentElement = currentElement.parentElement;  
    }  
  
    return { left: totalLeft, top: totalTop };  
} ,
    showValue(event){
      this.data.val=event.target.value;
      this.$refs.text.innerHTML="缩放比:"+this.data.val+'%';
      try{this.data.callback(this.data.val)}catch{};
    },
    get_rect(){
      let rect=this.$refs.range.getBoundingClientRect();

  // console.log('Top:', rect.top);
  // console.log('Left:', rect.left);
  // console.log('Bottom:', rect.bottom);
  // console.log('Right:', rect.right);
  // console.log('Width:', rect.width);
  // console.log('Height:', rect.height);
  return rect
    },
    handleMouseEnter(){  
        if(this.hover_flag==false){
            this.hover_flag=true; 
            let rect=this.get_rect();
            let oobj=this.accumulateParentOffsets(this.$refs.range);
            this.hovertext_style=`top:${rect.top-oobj.top-40};left:${rect.left-oobj.left}`;
        }
      },  
      handleMouseLeave() {  
        if(this.hover_flag==true){
            this.hover_flag=false; 
            this.hovertext_style="top:-100;visibility:hidden;";
        }
      } ,
  },
  mounted:function(){
} }
);

//-------------------------绘制 组件按钮-------end--------------//
////如果处于组件拖拽进来的状态
//创建连线
//组件被点击
Vue.component2('a_1_0_4_5_1', {  
    template: `
<div class="a_1_0_4_5_1_parent1" v-show="data.show_flag ">

  <!-- 顶部显示窗口 start -->
    <div class="a_1_0_4_5_1_title" ref="title">
        <div style="padding-left:20px;color:#bcbcbc">前端可视化编辑界面
            <div style="display:inline-block;flex:1;">
                <div style="display:flex;
                    justify-content: flex-end;
                    display: flex;">
                </div>
            </div>
        </div>
    </div>
  <!-- 顶部显示窗口 end -->


<!-- 弹窗部分 end -->
  <!-- 主要操作窗口 start -->
  <div ref="scroll"class="a_1_0_4_5_1_parent a_1_0_4_5_1scrollbar"style="position: relative;
    background: #282828;"
   
    >
    <div :style="data.write_style"
    class="a_1_0_4_5_1_parent3"
    ref="write_dom"
    @mousemove="mousemove_"  
    @mouseup="mouseup_" 
    @mouseleave="mouseleave_" 
    @mouseenter="mouseenter_"
    @mousedown="mousedown_"
    >
    </div>
    </div>

  <!-- 主要操作窗口 end -->
  
  <!-- 底部设置窗口 start -->
    <div class="a_1_0_4_5_1_shu_page_info" ref="end">
    <!-- 设置界面缩放比 start -->
    <a_1_0_4_5_1_input_range  :key="data.scale_key"style="padding:7.5px" :deepcopy_data="data.change_scale_info"></a_1_0_4_5_1_input_range>
    <!-- 设置界面缩放比 end -->

    <!-- 设置界面宽度 start -->
    <a_1_0_4_5_1button  :key="data.width_key" style="padding:7.5px":deepcopy_data="data.change_width_info"></a_1_0_4_5_1button>
    <!-- 设置界面宽度 end -->

    <!-- 设置界面高度 start -->
    <a_1_0_4_5_1button  :key="data.height_key"style="padding:7.5px" :deepcopy_data="data.change_height_info"></a_1_0_4_5_1button>
    <!-- 设置界面高度 end -->

        </div>
    </div>
  <!-- 底部设置窗口 end -->

    </div>
  `,  
  data:function(){  
  
    return {
      page_type_key:"ff1",
      page_type:'未运行',
      now_select_temp_menu_flag:false,
      now_select_line_menu_flag:false,
        data:{
          write_style:"width:1920px;height:1080px;scale:0.5",
          scale:1.0,
          scale_key:"1",
          change_scale_info:{},
          change_width_info:{},
          change_height_info:{},
          width:'1920px',
          width_key:"3",
          height:'1080px',
          height_key:"5",

          key:null,//当前选择的页面
          data:{},
          全局配置对象:null,
          true:true,
          false:false,
          show_flag:false,
          },
        }
    }   , 
    watch:{

    },
  methods: {  
  拖拽进来组件:function(event,info){
    this.data.新增组件(event,info);
    
  },
  //鼠标释放 触发函数
  mouseup_:async function(event,){
    let _this=this;
    event.stopPropagation();
    console.log("释放dom1")
    // await time_sleep(5000);
    console.log("_this.data.全局鼠标操作对象1 eeee",JSON.parse(JSON.stringify(this.data.全局鼠标操作对象1.up_funcs)))
    if (this.data.全局鼠标操作对象1.up_funcs['拖拽前端组件']){
      this.拖拽进来组件(event,this.data.全局鼠标操作对象1.get_data({"key":'拖拽前端组件'}));
      
      this.data.全局鼠标操作对象1.unset_move({"key":"拖拽前端组件",
        key2:"鼠标移动时移动dom2",});
    this.data.全局鼠标操作对象1.unset_up({"key":"拖拽前端组件",
        key2:"鼠标up时回收dom",});
        this.data.全局鼠标操作对象1.set_data({
            key:"拖拽前端组件_move_flag",
            data:{"flag":false}
        });
        a_1_0_2_25_1_move_obj.$el.style.visibility='hidden';
        this.data.删除容器插入位();
    }else if(_this.left_button_flag){
      if((Math.abs(event.clientX==_this.left_button_xy.x)<8)&&(Math.abs(event.clientY==_this.left_button_xy.y)<8)){
        //鼠标左键按下
        _this.data.设置move描边(event);
        if(_this.old_move_dom_id!='-1'){
          _this.data.选择组件(_this.old_move_dom_id);
        }
      }
    }else if(_this.right_button_flag){
      if((Math.abs(event.clientX==_this.right_button_xy.x)<8)&&(Math.abs(event.clientY==_this.right_button_xy.y)<8)){
        //鼠标右键按下
        _this.data.设置move描边(event);
        if(_this.old_move_dom_id!='-1'){
          _this.data.弹出组件右击窗口(event);
        }
      }
    }
    
    console.log("释放dom1 end")
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mouseup(event,params);}catch{}
    
  },

  //鼠标按下
  mousedown_:async function(event,){
    let _this=this;
    //鼠标左击按下
    if(event.button===0){
      _this.left_button_flag=true;
      _this.right_button_flag=false;
    _this.left_button_xy={x:event.clientX,y:event.clientY};
    //鼠标右击按下
    }else if(event.button===2){
      _this.right_button_flag=true;
      _this.left_button_flag=false;
      _this.right_button_xy={x:event.clientX,y:event.clientY};
    }
  },
  //鼠标移动 触发函数
  mousemove_:function(event){
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mousemove(event,params);}catch{}

    let flag_data=this.data.全局鼠标操作对象1.get_data({
      key:"拖拽前端组件_move_flag",
  });
  let 拖拽前端_flag=false;
  try{if(flag_data.flag){拖拽前端_flag=true}}catch{}

  if(拖拽前端_flag){
    // console.log("设置容器描边")
    try{this.data.设置容器描边(event);}catch (err){console.log("err",err);
}
    
  }else{
    try{this.data.设置move描边(event);}catch{}
  }
  
  },
  //鼠标移入 触发函数
  mouseenter_:function(event,){
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mouseenter(event,params);}catch{}
  },
  //鼠标离开 触发函数
  mouseleave_:function(event,){
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mouseleave(event,params);}catch{}
    
  this.data.删除move描边(event);

  },
    run_page:function(){
      let body_data=JSON.parse(JSON.stringify(this.url_params))
      body_data['page_id']=this.now_select
      try{
        if (this.base_info['run_flag']==true){
        body_data['type']="stop_page"
        }else{
        body_data['type']="run_page"
        }
      }
      catch{
        body_data['type']="run_page"
      }
      this.project_post({body_data:body_data})
    },
    show_tip:function(a,b,c,d,e){
       show_tip(a,b,c,d,e)
    },
    _refresh:function(){
      //更新入参界面小三角数据
      try{
        this.base_info=this.data.page_config.dict[this.now_select].page_chat_base_info
        this.page_dict=this.data.page_config.dict[this.now_select].page_chat_use_compontent
        try{
          if (this.base_info['run_flag']==true){
          this.page_type='运行中'
          }else{
          this.page_type='未运行'
          }
        }
        catch{
          this.page_type='未运行'
        }
        
        //快速访问获取到进程名称
        this.process_dct=this.base_info.process_dct
        
        this.process_dct2={}
        for (let kkk in this.process_dct){this.process_dct2[kkk]=kkk}

        this.process_dct2['null']=''
        this.process_dct2['undefined']=''
        //刷新页面
        if (this.refresh.length>10){this.refresh="1"}else{this.refresh=this.refresh+"1"}
        
      }catch{}

    },
    handleGlobalClick(event){
      if (this.now_select_line_menu_flag==true){
        this.now_select_line_menu_flag=false
      }
      if (this.now_select_temp_menu_flag==true){
        this.now_select_temp_menu_flag=false
      }
    },
    check_select:function(){
       
      if (this.now_select==null)
      {return "position: relative;"}
      else if(!this.data.page_config.dict.hasOwnProperty(this.now_select)){
        return "display:none;position: relative;"
      }
      return "position: relative;"
    }, 
    check_select2:function(){
      if (this.now_select==null)
      {return "display:none;position: relative;"}
      else if(!this.data.page_config.dict.hasOwnProperty(this.now_select)){
        return "position: relative;"
      }
      return "display:none;position: relative;"
    },
    
    svg_down(event,params={}){
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.write_line_now_obj={
        x:event.clientX-rect.left-25,
        y:event.clientY-rect.top,
        name:''
      }
      this.连线_clientX=event.clientX;
      this.连线_clientY=event.clientY;
      this.连线_startx=this.write_line_now_obj.x;
      this.连线_starty=this.write_line_now_obj.y;
      this.write_line_start_key=params.key;
      this.write_line_flag=true;
    },
    //检测输出组件与输入组件是否存在连线
    check_line(out_id,in_id){
      
      let start_obj=this.page_dict[in_id]
      let start_obj_in_kwargs=start_obj.in_kwargs;
      for (let kk in start_obj_in_kwargs){
        if (start_obj_in_kwargs[kk].in_params && start_obj_in_kwargs[kk].in_params[0]==out_id){
          return {"type":true,'data':start_obj_in_kwargs[kk].in_params[2]}
        }
      }
      return {"type":false}
    },
    //在已有连线的组件上进行连线
    add_line_params(out_id,in_id,check_line_res,out_params_info){
let _this=this;
      let key1=out_params_info.key1//出参组件的 出参 id
      let key2=out_params_info.key2//入参组件的 入参 id
      //1.更新 入参组件的 入参连线index计数
      //2.更新 入参组件的 入参连线 的数据
      let in_kwargs_data={}
      in_kwargs_data[key2]={"in_params":{},"in_type1":"1",'v1_':[out_id,key1]}
                      //--------输出的key和value
      in_kwargs_data[key2]['in_params']=[out_id,key1,check_line_res.data]
      //4.更新 出参组件的 出参连线index计数
      //5.更新 出参组件的 出参连线 的数据
      let out_kwargs_data={}
      out_kwargs_data[key1]={"out_params":{}}
                      //--------输出的key和value
      out_kwargs_data[key1]['out_params'][in_id]={}
      out_kwargs_data[key1]['out_params'][in_id][key2]={"key":check_line_res.data}
//更新数据 
let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  update_params:[
    {
      name:"检查目标元素是否存在 存在则不执行该操作",
      path:`page_config.dict.1.dict.${this.now_select}.page_dict.${in_id}.in_kwargs.${key2}.in_params`,
      message:"已经拥有此传参了",
      use:"check_true"
    }
  ],
  "postput":[
    {
      'path':`page_config.dict.1.dict.${this.now_select}.page_dict.${out_id}.out_kwargs`,
      'data':out_kwargs_data
    },
    //更新
    {
      'path':`page_config.dict.1.dict.${this.now_select}.page_dict.${in_id}.in_kwargs`,
      'data':in_kwargs_data
    },
  ],
}
_this.data.全局配置对象.更新(update_val);
    },
    handleMouseDown(event, params = {}) {  
      if (event.button === 2) {
        // 如果是右键，阻止进一步处理
        return;
    }
      console.log('Mouse down, but ignoring params:', event);  
      this.拖动_clientX=event.clientX;
      this.拖动_clientY=event.clientY;
      let oojb=this.page_dict[params.key];
      this.拖动_startx=oojb.x;
      this.拖动_starty=oojb.y;
      this.拖动_key=params.key;
      this.拖动_flag=true;
      console.log('旧坐标:',this.拖动_startx,this.拖动_starty)
      // 这里默认不处理传入的params，因为它不是从事件直接传入的  
      // 你可以在其他地方调用这个函数时传入params  
      // 你可能想在这里做一些初始化工作，比如设置一个标志位  
    },  

handleMouseLeave(event){
  // this.movein_flag=false;
},
    handleMouseMove(event) {  
      // this.movein_flag=true
      // if (this.拖动_flag == true){
      //   let oojb=this.page_dict[this.拖动_key];
      //   oojb.x=this.拖动_startx+event.clientX-this.拖动_clientX;
      //   oojb.y=this.拖动_starty+event.clientY-this.拖动_clientY;
      // }else if(this.write_line_flag==true){

      //   this.write_line_now_obj.x=this.连线_startx+event.clientX-this.连线_clientX;
      //   this.write_line_now_obj.y=this.连线_starty+event.clientY-this.连线_clientY;
      // }
    },  
  
    handleMouseUp(event) {  
    }  ,
    check_type:function(){
      if (typeof this.$el.querySelector === 'function') {  
        return true
    } else { return false }
    },
    //id不存在则返回true
    check_p:function(process_id){return process_id==null ||(!(this.process_dct[process_id]))},

    //当组件间进行参数传递时  建立相应的进程关系
    process_add_lst:function(use_compontent,lst,temp_id,put_process_id,put_lst){
      //process_from={1:{'1':{}}}
      //process_from_fast={1:{'from_key':1,fast:{1:true,2:true,3:true}}}
      let now_info=use_compontent[temp_id]
      put_lst=JSON.parse(JSON.stringify({"a":put_lst}))['a']
      let put_dct={};
      // console.log(put_lst)
      for (let k=0;k<put_lst.length;k++){
        put_dct[put_lst[k]]=true
      }
    // console.log('put_lst,put_dct',put_lst,put_dct)
      // let process_id=now_info.process_id
      let check_id=null
    // console.log("add_lst_flag",this.check_p(process_id)==check_p_flag)
      // if (this.check_p(put_process_id)==check_p_flag){
        let in_ids=null;
        let in_kwargs=now_info.in_kwargs,out_kwargs=now_info.out_kwargs;
        for(let i in in_kwargs){
          try{
          check_id=in_kwargs[i].in_params[0];
          //如果目标id不在目标字典中  那么将process_id传入
          if (!(check_id in put_dct)){
              lst.push([put_process_id,temp_id,check_id,put_lst])
          }
        }catch{}
        }
        for(let i in out_kwargs){
          try{
          in_ids=Object.keys(out_kwargs[i].out_params)
          for (let j in in_ids){
            
            check_id=in_ids[j];
            //如果目标id不在目标字典中  那么将process_id传入
            if (!(check_id in put_dct)){
                lst.push([put_process_id,temp_id,check_id,put_lst])
            }

            }}catch{}
        }
      // }
    },
    set_process_from:function(输出组件_id,输入组件_id){
       let use_compontent=JSON.parse(JSON.stringify(this.page_dict));
       let 输出组件_进程id=use_compontent[输出组件_id].process_id;
       let 输入组件_进程id=use_compontent[输入组件_id].process_id;
       console.log("输出组件_进程id",输出组件_进程id)
       let lst=[];//待处理队列
       let post_dct={};//要进行post的对象
       if (!this.check_p(输出组件_进程id)){
        console.log("输出拥有进程id:",!this.check_p(输出组件_进程id))
        lst.push(
          {
            输出组件_进程id:输出组件_进程id,
            输出组件_id:输出组件_id,
            输入组件_id:输入组件_id,
            进程路径:this.get_process_lst_by_process_id(输出组件_id,输出组件_进程id)
          }
        )
       }
       if (!this.check_p(输入组件_进程id)){
        // console.log("inininini",in_id,输入组件_进程id)
       console.log("输入拥有进程id:",this.check_p(输出组件_进程id))
        lst.push(
          {
            输出组件_进程id:输入组件_进程id,
            输出组件_id:输入组件_id,
            输入组件_id:输出组件_id,
            进程路径:this.get_process_lst_by_process_id(输入组件_id,输入组件_进程id)
          })
       }
       let 临时记录组件当前进程id={};
       let 当前处理项=null,新路径=null,当前处理项数据=null;
       while (lst.length){
        当前处理项=lst.pop();//取出当前处理项
        //如果输入组件已拥有进程id 则跳过
        当前处理项数据=this.page_dict[当前处理项.输入组件_id];
        if(!this.check_p(当前处理项数据.process_id) || (临时记录组件当前进程id[当前处理项.输入组件_id])){continue}
        //存入临时记录表 避免重复添加
        临时记录组件当前进程id[当前处理项.输入组件_id]=true;
        //更新路径
        新路径=JSON.parse(JSON.stringify({'a':当前处理项.进程路径}))['a'];
        新路径.push(当前处理项.输入组件_id);
        //写入数据
        post_dct[当前处理项.输入组件_id]={
          process_id:当前处理项.输出组件_进程id,
          process_from:{}
        }
        post_dct[当前处理项.输入组件_id].process_from[当前处理项.输出组件_进程id]=新路径;
        //遍历出参和入参 将组件加入待处理列表
        let in_kwargs=当前处理项数据.in_kwargs,out_kwargs=当前处理项数据.out_kwargs;
        for(let i in in_kwargs){
          try{
          check_id=in_kwargs[i].in_params[0];
          //如果目标id不在目标字典中  那么将process_id传入
          lst.push(
            {
              输出组件_进程id:当前处理项.输出组件_进程id,
              输出组件_id:当前处理项.输入组件_id,
              输入组件_id:check_id,
              进程路径:新路径
            })
        }catch{}
        }
        for(let i in out_kwargs){
          try{
          in_ids=Object.keys(out_kwargs[i].out_params)
          for (let j in in_ids){
            
            check_id=in_ids[j];
            //如果目标id不在目标字典中  那么将process_id传入
            lst.push(
              {
                输出组件_进程id:当前处理项.输出组件_进程id,
                输出组件_id:当前处理项.输入组件_id,
                输入组件_id:check_id,
                进程路径:新路径
              })

            }}catch{}
        }}

       return post_dct
      },
    //当删除组件 或者删除连线时 删除相应的进程关系
    process_add_lst2:function(lst,temp_id,put_process_id,put_lst=null,check_id=null){
      // console.log("lst:",lst)
      // console.log("temp_id:",temp_id)
      // console.log("put_process_id:",put_process_id)
      // console.log("put_lst:",put_lst)
      // console.log("check_id:",check_id)
        //process_from={1:{'1':{}}}
        //process_from_fast={1:{'from_key':1,fast:{1:true,2:true,3:true}}}
        let now_info=this.page_dict[temp_id]
        // let process_id=now_info.process_id
      // console.log("add_lst_flag",this.check_p(process_id)==check_p_flag)
        // if (this.check_p(put_process_id)==check_p_flag){
          let in_ids=null,del_lst=null,new_lst=null;
          let in_kwargs=now_info.in_kwargs,out_kwargs=now_info.out_kwargs,add_llst=[];
          if (check_id!=null){
        // console.log("temp->check_id",temp_id,check_id,this.page_dict[check_id].process_from[put_process_id])
            try{
              del_lst=this.page_dict[check_id].process_from[put_process_id][temp_id];
              // console.log("del_lst",del_lst)
              if (!del_lst){return}
              // console.log(`del_lst ${check_id}(check_id) ${put_process_id}(process_id)`,this.page_dict[check_id],put_process_id,del_lst)
              lst.push([put_process_id,temp_id,check_id,del_lst])
            }catch{}
            return
          }
      ///////////////////////
          for(let i in in_kwargs){
            try{
  add_llst.push(in_kwargs[i].in_params[0])}catch{}}
      for(let i in out_kwargs){
            try{
            in_ids=Object.keys(out_kwargs[i].out_params)
            for (let j in in_ids){
  add_llst.push(in_ids[j])
            }}catch{}}
  
  if(put_lst==null&&check_id==null){
      
  for(let ii=0;ii<add_llst.length;ii++){
      // console.log("check",add_llst[ii],this.page_dict[add_llst[ii]].process_from[put_process_id][temp_id])
      check_id=add_llst[ii]
      del_lst=this.page_dict[check_id].process_from[put_process_id][temp_id]
      try{del_lst=this.page_dict[check_id].process_from[put_process_id][temp_id]}catch{continue}
      if(!del_lst){continue}
      new_lst=JSON.parse(JSON.stringify({"a":del_lst}))["a"];
      new_lst.pop();
        lst.push([put_process_id,temp_id,check_id,del_lst])
      
  }
         return 
      }
  let put_lst_str=put_lst.join("_")
  //let test_str=''
  for(let ii=0;ii<add_llst.length;ii++){
      // console.log("check",add_llst[ii],this.page_dict[add_llst[ii]].process_from[put_process_id][temp_id])
      check_id=add_llst[ii]
      try{del_lst=this.page_dict[check_id].process_from[put_process_id][temp_id]}catch{continue}
      if(!del_lst){continue}
      new_lst=JSON.parse(JSON.stringify({"a":del_lst}))["a"];
      new_lst.pop();
      if (new_lst.join("_")==put_lst_str){
          //test_str=test_str+check_id+' '
        lst.push([put_process_id,temp_id,check_id,del_lst])
      }
  }
      
      //if(!test_str){console.log(`${temp_id}=>${check_id}`,test_str)}
      },
    //
    del_process_from__x2:function(obj){
      if(!obj.临时_process_dct[obj.组件id]){
        let process_from=obj.process_from || this.page_dict[obj.组件id].process_from || {};
        for(let 进程id in process_from){
          obj.临时_process_dct[进程id]=process_from[进程id].join('_')
        }
      }
      return obj.临时_process_dct[obj.组件id]
    },
    del_process_from__x:function(obj){
      let lst=[];
      if(obj.flag=='删除组件'){
        let 输出组件数据=this.page_dict[obj.输出组件_id];
        let process_from=输出组件数据.process_from||{};
        for(let k in process_from){
          lst.push(
            {
              组件id:obj.输出组件_id,
              路径:process_from[k],
              进程id:k
            }
          )
        }
      }
      else if(obj.flag=='删除连线'){
        let 输出组件数据=this.page_dict[obj.输出组件_id];
        let 输入组件数据=this.page_dict[obj.输入组件_id];
        let process_dct1=输出组件数据.process_from||{};
        let process_dct2=输入组件数据.process_from||{};
        //判断输入组件 路径是否由输出组件 路径传入
        for(let k in process_dct1){
          if(process_dct2[k].join("_")==(process_dct1[k].join("_")+'_'+obj.输入组件_id)){
            lst.push({
              组件id:obj.输入组件_id,
              路径:process_dct2[k],
              进程id:k
            }
            )
          }
        }
        //判断输出组件 路径是否由输入组件 路径传入
        for(let k in process_dct2){
          if(process_dct1[k].join("_")==(process_dct2[k].join("_")+'_'+obj.输出组件_id)){
            lst.push({
              组件id:obj.输出组件_id,
              路径:process_dct1[k],
              进程id:k
            }
            )
          }
        }
      }else if(obj.flag=='删除指定路径'){
        let 路径=obj.路径;
        let 进程id=obj.进程id;
        let 组件id=obj.组件id;
        let 组件数据=this.page_dict[组件id];
        let in_kwargs=组件数据.in_kwargs;
        let out_kwargs=组件数据.out_kwargs;
        for(let i in in_kwargs){
          try{
            check_id=in_kwargs[i].in_params[0];
            if ((this.page_dict[check_id].process_from[进程id]||['#']).join("_")==(路径.join("_")+'_'+check_id)){
              lst.push({
                组件id:check_id,
                路径:this.page_dict[check_id].process_from[进程id],
                进程id:进程id
              })
            }
        }catch{}
        }
        
      for(let i in out_kwargs){
        try{
        in_ids=Object.keys(out_kwargs[i].out_params)
        for (let j in in_ids){
          check_id=in_ids[j];
          if ((this.page_dict[check_id].process_from[进程id]||['#']).join("_")==(路径.join("_")+'_'+check_id)){
            lst.push({
              组件id:check_id,
              路径:this.page_dict[check_id].process_from[进程id],
              进程id:进程id
            })
          }
        }}catch{}}}
      return lst
    },
    del_process_from_get_process_id:function(obj){
      let add_new_prcess=obj.add_new_prcess;
      let del_路径_dct=obj.del_路径_dct;
      let del_line=obj.del_line;
      let del_id=obj.del_id;
      let 组件id=obj.组件id;
      // console.log("组件id为",组件id,'开始获取新id')
      // console.log("为删除processid的添加新的进程id",JSON.parse(JSON.stringify(obj)));
      // console.log("为删除processid的添加新的进程id #1")
      let 组件数据=this.page_dict[组件id];
      // console.log("为删除processid的添加新的进程id #2")
      let in_kwargs=组件数据.in_kwargs;
      // console.log("为删除processid的添加新的进程id #3")
      let out_kwargs=组件数据.out_kwargs;
      // console.log("为删除processid的添加新的进程id #4")
      let check_id=null;
      // console.log("为删除processid的添加新的进程id #5",in_kwargs,out_kwargs)
      //遍历入参和出参 获取到新的process_id
      for(let i in in_kwargs){
        try{
          check_id=in_kwargs[i].in_params[0];
          if (check_id==del_id){continue}
          if(del_line && del_line[0]==check_id && del_line[1]==组件id){continue}
          let check_process_from=this.page_dict[check_id].process_from||{};
          let del_lst=del_路径_dct[check_id];
          
      // console.log("为删除processid的添加新的进程id #6",JSON.parse(JSON.stringify(check_process_from)))
          let add_new=add_new_prcess[check_id];
          // console.log("add_new_prcess",add_new_prcess)
          //如果目标组件id拥有新的进程id 那么直接设置
          if(add_new){
            for(let check_process_id in add_new){
              let res={};
              // console.log("为删除processid的添加新的进程id #8")
              res[组件id]={process_id:check_process_id,process_from:{}};
              // console.log("为删除processid的添加新的进程id #9")
              let new_lst=JSON.parse(JSON.stringify(add_new[check_process_id]));
              // console.log("为删除processid的添加新的进程id #10")
              new_lst.push(组件id);
              // console.log("为删除processid的添加新的进程id #11")
              res[组件id].process_from[check_process_id]=new_lst;
              // console.log("为删除processid的添加新的进程id #12",new_lst)
              return res

            }
          }
          for(let check_process_id in check_process_from){
            if(del_lst){
              //来源没有被删除
              if (!del_lst.includes(check_process_id)){
                // console.log("为删除processid的添加新的进程id #7")
                let res={};
                // console.log("为删除processid的添加新的进程id #8")
                res[组件id]={process_id:check_process_id,process_from:{}};
                // console.log("为删除processid的添加新的进程id #9")
                let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
                // console.log("为删除processid的添加新的进程id #10")
                new_lst.push(组件id);
                // console.log("为删除processid的添加新的进程id #11")
                res[组件id].process_from[check_process_id]=new_lst;
                // console.log("为删除processid的添加新的进程id #12",new_lst)
                return res
              }
            }else{
              // console.log("为删除processid的添加新的进程id #7")
              let res={};
              // console.log("为删除processid的添加新的进程id #8")
              res[组件id]={process_id:check_process_id,process_from:{}};
              // console.log("为删除processid的添加新的进程id #9")
              let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
              // console.log("为删除processid的添加新的进程id #10")
              new_lst.push(组件id);
              // console.log("为删除processid的添加新的进程id #11")
              res[组件id].process_from[check_process_id]=new_lst;
              // console.log("为删除processid的添加新的进程id #12",new_lst)
              return res
            }
          }
      }catch{}
      }
      
    for(let i in out_kwargs){
      try{
      in_ids=Object.keys(out_kwargs[i].out_params)
      for (let j in in_ids){
        check_id=in_ids[j];
        
        // console.log("为删除processid的添加新的进程id #7-1 check_id",check_id)
        if (check_id==del_id){continue}
        if(del_line && del_line[0]==组件id && del_line[1]==check_id){continue}
        // console.log("为删除processid的添加新的进程id #7-2 check_id",check_id)
        let check_process_from=this.page_dict[check_id].process_from||{};
        let del_lst=del_路径_dct[check_id];
        
        // console.log("为删除processid的添加新的进程id #7-3 check_id",check_process_from)
        let add_new=add_new_prcess[check_id];
        // console.log("add_new_prcess",add_new_prcess)
        //如果目标组件id拥有新的进程id 那么直接设置
        if(add_new){
          for(let check_process_id in add_new){
            let res={};
            // console.log("为删除processid的添加新的进程id #8")
            res[组件id]={process_id:check_process_id,process_from:{}};
            // console.log("为删除processid的添加新的进程id #9")
            let new_lst=JSON.parse(JSON.stringify(add_new[check_process_id]));
            // console.log("为删除processid的添加新的进程id #10")
            new_lst.push(组件id);
            // console.log("为删除processid的添加新的进程id #11")
            res[组件id].process_from[check_process_id]=new_lst;
            // console.log("为删除processid的添加新的进程id #12",new_lst)
            return res

          }
        }
        for(let check_process_id in check_process_from){
          if(del_lst){
            //来源没有被删除
            if (!del_lst.includes(check_process_id)){
              // console.log("为删除processid的添加新的进程id #7")
              let res={};
              // console.log("为删除processid的添加新的进程id #8")
              res[组件id]={process_id:check_process_id,process_from:{}};
              // console.log("为删除processid的添加新的进程id #9")
              let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
              // console.log("为删除processid的添加新的进程id #10")
              new_lst.push(组件id);
              // console.log("为删除processid的添加新的进程id #11")
              res[组件id].process_from[check_process_id]=new_lst;
              // console.log("为删除processid的添加新的进程id #12",new_lst)
              return res
            }
          }else{
            // console.log("为删除processid的添加新的进程id #7")
            let res={};
            // console.log("为删除processid的添加新的进程id #8")
            res[组件id]={process_id:check_process_id,process_from:{}};
            // console.log("为删除processid的添加新的进程id #9")
            let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
            // console.log("为删除processid的添加新的进程id #10")
            new_lst.push(组件id);
            // console.log("为删除processid的添加新的进程id #11")
            res[组件id].process_from[check_process_id]=new_lst;
            // console.log("为删除processid的添加新的进程id #12",new_lst)
            return res
          }
        }
      
      }}catch{}}


    },
    del_process_from:function(obj){
      let 输出组件_id=obj.out_id;
      let 输入组件_id=obj.in_id;
      let del_id=obj.del_id;
      let del_line=null;
      let 待处理列表=[];
      let del_temp_dct={};//存放删掉进程的组件id {组件id:true}
      let del_路径_dct={};//存放删掉的路径  {组件id:[进程id]}
        let res={
          delete_lst:[],
          postput:{}
        };
        if(!输入组件_id){
          待处理列表=this.del_process_from__x({
            flag:"删除组件",
            输出组件_id:输出组件_id
          });
          // console.log("要删除的进程#########初始化0:","删除组件",JSON.parse(JSON.stringify(待处理列表)))
        }else{
          del_line=[输出组件_id,输入组件_id];

          待处理列表=this.del_process_from__x({
            flag:"删除连线",
            输出组件_id:输出组件_id,
            输入组件_id:输入组件_id
          });
          
          // console.log("要删除的进程#########初始化0:","删除连线",JSON.parse(JSON.stringify(待处理列表)))
        }
        while (待处理列表.length){
          let obj=待处理列表.pop();
          // res.delete_lst.push(obj.组件id+'.process_from.'+obj.进程id);
          if(!del_路径_dct[obj.组件id]){del_路径_dct[obj.组件id]=[obj.进程id]}
          else{
            if(!del_路径_dct[obj.组件id].includes(obj.进程id)){

              del_路径_dct[obj.组件id].push(obj.进程id)
            }}
          // console.log("要删除的进程#########1:","delete_lst",JSON.parse(JSON.stringify(res.delete_lst)))
          if(this.page_dict[obj.组件id].process_id==obj.进程id && del_id!=obj.组件id){
            res.postput[obj.组件id]={process_id:null}
            del_temp_dct[obj.组件id]=true;
          }
          let 待处理列表2=this.del_process_from__x({
            flag:"删除指定路径",
            路径:obj.路径,
            进程id:obj.进程id,
            组件id:obj.组件id,
          });
          // console.log("要删除的进程#########2:","删除指定路径",JSON.parse(JSON.stringify(待处理列表)))
          待处理列表 = [...待处理列表, ...待处理列表2];
        }
        //遍历要删除的
        for (let 组件id_ in del_路径_dct){
          if(组件id_==del_id){continue}
          for (let idx in del_路径_dct[组件id_]){
            let 进程id_=del_路径_dct[组件id_][idx];
            res.delete_lst.push(组件id_+'.process_from.'+进程id_);
          }
        }
        let while_true=true;
        let has_process_id={};
        let add_new_prcess={};
        while(while_true){
          while_true=false;
          //遍历要删除process_id的组件    重新获取process_id
          for (let 组件id in del_temp_dct){
            if(!has_process_id[组件id]){
              let new_process=this.del_process_from_get_process_id({
                del_路径_dct:del_路径_dct,
                del_id:del_id,
                组件id:组件id,
                add_new_prcess:add_new_prcess,
                del_line:del_line
              })
              if (new_process){
                while_true=true;
                has_process_id[组件id]=true;
                add_new_prcess[组件id]=JSON.parse(JSON.stringify(new_process[组件id].process_from));
                lhp_deepcopy1(res.postput,new_process);
              }
            }
          }

        }
        return res
      },
    
    get_process_lst_by_process_id:function(temp_id,process_id){
      return this.page_dict[temp_id].process_from[process_id]
    },
    return_str:function(a){return Object.keys(a).sort().map(k => `${k}__${Object.keys(a[k]).sort((a, b) => a - b).join('_')}`).join('')},

    //建立连线后 建立相应的触发关系  【触发函数:如客户http请求后的回调函数   被动函数:如def a():return 's'可以随时调用的函数，一个是必须等客户请求后才会运行，一个是随时可以调用。当被动函数的传参由触发函数构成时，被动函数的类型转为触发函数。          设置这个触发类和被动类是后台解析数据时编排函数运行顺序时需要使用【在函数获取到所有触发函数传递过来的传参后，主动调用被动函数获取剩余的传参】
    set_tree_types:function(out_id,in_id){
      let out_temp=this.page_dict[out_id];
      let lst=[];
      let res={};
      if (out_temp.tree_type=='1'){
        lst.push(
          {
            out_id:out_id,
            in_id:in_id,
            tree_from:out_temp.tree_from
          }
        )}
        
        while (lst.length>0){
          let pop_item=lst.pop()
          let now_out_id=pop_item.out_id;
          let now_in_id=pop_item.in_id;
          let tree_from=pop_item.tree_from;
          //如果目标已经为1 那么不处理
          if(this.page_dict[now_in_id].tree_type=='1'){continue}
          else{
            //如果目标已经在新增 那么跳过
            if(res[now_in_id]){continue}
            let new_tree_from=JSON.parse(JSON.stringify(tree_from));
            new_tree_from.push(now_in_id);
            res[now_in_id]={
              tree_type:'1',
              tree_from:new_tree_from
            }
            //遍历目标的所有输出项 添加进待处理队列中
            let out_k=this.page_dict[now_in_id].out_kwargs;
            if (out_k){
              for (let k in out_k){
                if (out_k[k].out_params){
                  for (let iin_id in out_k[k].out_params){
                    lst.push(
                      {
                        out_id:now_in_id,
                        in_id:iin_id,
                        tree_from:new_tree_from
                      })
                  }
                }
                
              }
            }
          }
           
              
              

        }
        return res
    },
    //删除组件 或者删除连线时 删除相应的触发关系  
    del_tree_types:function(obj){
      let del_id=obj.del_id;
      let del_line=obj.del_line;
      let out_id=obj.out_id;
      let in_id=obj.in_id;
      let out_temp=this.page_dict[out_id];
      let lst=[];
      let del_dct={};
      let new_dct={};
      let res={
      }
      if(in_id){
        let in_temp=this.page_dict[in_id];
        //删除的是一个连线 如果输入组件的tree_type来源于out 那么删除
        if(out_temp.tree_from && in_temp.tree_from && ((out_temp.tree_from.join("_")+"_"+in_id) == in_temp.tree_from.join("_"))){
          lst.push({
            out_id:in_id,
            tree_from:in_temp.tree_from
          })
        }
        del_line=[out_id,in_id]
      }else{
        //删除的是一个组件
        if(out_temp.tree_type=='1'){
          lst.push({
            out_id:out_id,
            tree_from:out_temp.tree_from
          })
        }
      }
      
        while (lst.length>0){
          let now_obj=lst.pop();
          if(now_obj.out_id!=del_id){
            res[now_obj.out_id]={
              tree_type:0,
              tree_from:null
            }
            del_dct[now_obj.out_id]=true;
          }
          //遍历输出项 添加入队列
          out_k=this.page_dict[now_obj.out_id].out_kwargs
          let tree_from_str=now_obj.tree_from.join("_");
          if (out_k){
            for (let k in out_k){
              if (out_k[k].out_params){
                for (let iin_id in out_k[k].out_params){
                  let iin_data=this.page_dict[iin_id];
                  if(iin_data.tree_type=='1'&& (tree_from_str+'_'+iin_id==iin_data.tree_from.join("_"))){
                    lst.push({
            out_id:iin_id,
            tree_from:iin_data.tree_from
                    })
                  }
                }
              }
              
            }
          }
        }

        //遍历删除的tree_from 重新获取tree_from
        let while_true=true;
        console.log("del_dct",del_dct)
        while(while_true){
          while_true=false;
          for(let now_del_id in del_dct){
            if(res[now_del_id].tree_type=='1'){continue}
            //遍历向此id输入的组件 查找是否有tree_type=1的组件 有的话 重新获取tree_from
            let in_k=this.page_dict[now_del_id].in_kwargs;
            console.log("eeeeee 33",now_del_id,JSON.parse(JSON.stringify(in_k)))
            for(let i in in_k){
              try{
                check_id=in_k[i].in_params[0];
                console.log("eeeeee 1")
                if (check_id==del_id){continue}//如果来源为del_id则跳过
                console.log("eeeeee 2")
                if(del_line && del_line[0]==check_id && del_line[1]==now_del_id){continue}//如果来源为删除连线则跳过
                console.log("eeeeee 3")
                if(new_dct[check_id]){
                  while_true=true;
                  let new_tree_from=JSON.parse(JSON.stringify(new_dct[check_id]));
                  new_tree_from.push(now_del_id)
                  res[now_del_id]={
                    tree_type:'1',
                    tree_from:new_tree_from
                  }
                  new_dct[now_del_id]=new_tree_from;
                  break
                }
                console.log("eeeeee 4")
                if(this.page_dict[check_id].tree_type=='1'){
                  if(del_dct[check_id]){continue}
                  while_true=true;
                  let new_tree_from=JSON.parse(JSON.stringify(this.page_dict[check_id].tree_from));
                  new_tree_from.push(now_del_id)
                  res[now_del_id]={
                    tree_type:'1',
                    tree_from:new_tree_from
                  }
                  new_dct[now_del_id]=new_tree_from;
                  break
                }
                }catch{

                }
              }}}



        return res
    },
    _show_template:function(){

      // console.log('dddd')
      if (this.data.now_template_name){
        this.data.init_scroll();
        // console.log('dddd 2')
      let _html=`<${this.data.now_template_name} :db_indexr="db_indexr" var_name="${this.var_name2}":fullscreen="true" ></${this.data.now_template_name}>`
      //加载模板的名称
        // console.log('dddd 3')
        this.data.dom=this.$el.querySelector('.a_1_0_4_5_1')

        // this.data.dom=this.get_ref("edit");
        console.log("#############获取到的dom:",this.data.dom)
      // this.data.dom=this.$el.querySelector('.lhp_show_vue_template_____1_div_edit')
      this.data.dom.innerHTML=_html
      // console.log('dddd 4')
      new Vue({'el':this.data.dom,data:{true:true,is_edit:true,db_indexr:this.data.db_indexr}})
      // console.log('dddd 5')
      //更新数据
        // console.log('dddd 6')
        // this.data.get_config();
      // console.log('dddd 7')
    }
    },
    show_template:function(){
      ttime2(this.check_type,this._show_template,[],[])}
  }  ,//该属性 会自动生成watch data methods的属性  通过watch实现data

  mounted: function () {  
    
  _this.data.全局鼠标操作对象1=_this.deepcopy_data.全局鼠标操作对象1;
//   _this.data.全局鼠标操作对象1.set_up({
//     key:"拖拽前端组件",
//     key2:"鼠标up时回收dom",
//     func:_this.鼠标up时回收dom,
// });
    //设置缩放比 高度 宽度
    _this.data.更改scale=function(val){
      _this.data.scale=Number(val)/100;
      let left=-Number(_this.data.width.replace("px",""))*(1-_this.data.scale)/2;
      let top=-Number(_this.data.height.replace("px",""))*(1-_this.data.scale)/2;
      _this.data.write_style=`width:${_this.data.width};height:${_this.data.height};scale:${_this.data.scale};left:${left};top:${top};`;
    }
    _this.data.change_scale_info={"name":"缩放比","callback":_this.data.更改scale};
    _this.data.scale_key="2";
    _this.data.更改width=function(val){
      val=val.replace("px","");
      _this.data.width=Number(val)+'px';
      let left=-Number(_this.data.width.replace("px",""))*(1-_this.data.scale)/2;
      let top=-Number(_this.data.height.replace("px",""))*(1-_this.data.scale)/2;
      _this.data.write_style=`width:${_this.data.width};height:${_this.data.height};scale:${_this.data.scale};left:${left};top:${top};`;
      _this.data.change_width_info['hovertext']=_this.data.width;
    _this.data.width_key= _this.data.width_key==="104"?'103':'104';
    }
    
    _this.data.发起更改width请求=function(val){
      val=val.replace("px","");
      //更新数据 
      let update_val={
        "type":"change_data",
        type2:'更改width',
        now_select:_this.now_select,
        width:val,
        "path":"page_config.dict.1",
        "data_type":"set_list",//类型 修改数据
        "postput":[{
          
          'path':`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info`,
          'data':{
            width:val+'px',
          }
        }],
        }
        
        _this.data.全局配置对象.更新(update_val);
  }
  
    _this.data.change_width_info={"name":"宽度","callback":_this.data.发起更改width请求};
    _this.data.width_key="4";
    _this.data.更改height=function(val){
      val=val.replace("px","");
      _this.data.height=Number(val)+'px';
      let left=-Number(_this.data.width.replace("px",""))*(1-_this.data.scale)/2;
      let top=-Number(_this.data.height.replace("px",""))*(1-_this.data.scale)/2;
      _this.data.write_style=`width:${_this.data.width};height:${_this.data.height};scale:${_this.data.scale};left:${left};top:${top};`;
      
      _this.data.change_height_info['hovertext']=_this.data.height;
    _this.data.height_key= _this.data.height_key==="106"?'105':'106';
    }
    _this.data.发起更改height请求=function(val){
        //更新数据 
        let update_val={
          "type":"change_data",
          type2:'更改height',
          now_select:_this.now_select,
          height:val,
          "path":"page_config.dict.1",
          "data_type":"set_list",//类型 修改数据
          "postput":[{
            
            'path':`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info`,
            'data':{
              height:val+'px',
            }
          }],
          }
          
          _this.data.全局配置对象.更新(update_val);
    }
    _this.data.change_height_info={"name":"高度","callback":_this.data.发起更改height请求};
    _this.data.height_key="6";
    //设置当前选择的页面图
    _this.data.set_key= async function(path){
      console.log("当前选择.....",path)
      try{

        let path_lst=path.split(".");
        // console.log("111111111111111111")
        _this.now_select=path_lst[path_lst.length-2];
        // console.log("222222222222222222222")
        _this.page_dict=_this.data.全局配置对象.update_obj.data.page_config.dict[1].dict[_this.now_select].dict[1].page_dict;
        // console.log("333333333333333333333")
        _this.base_info=_this.data.全局配置对象.update_obj.data.page_config.dict[1].dict[_this.now_select].dict[1].base_info;
        // console.log("444444444444444444444")
  
        //存放当前渲染的dom
        _this.now_dom_dct={};
        //清空内容
        _this.$refs.write_dom.innerHTML = '';
        // console.log("绘制当前页面 scale")
        //存放
        _this.data.更改scale(_this.base_info.scale);
        _this.data.scale_key=_this.data.scale_key=='2'?'1':'2';
        // console.log("绘制当前页面 height");
        _this.data.更改height(_this.base_info.height);
        // console.log("绘制当前页面 width");
        _this.data.更改width(_this.base_info.width);
        // console.log("绘制当前页面 初始化容器");
        _this.data.初始化容器();
        // console.log("5555555555555555")
      // _this.data.更改scale
        // console.log("绘制当前页面 start");
        await _this.data.绘制当前页面的数据();
        // console.log("绘制当前页面 end");
        //绘制当前页面的界面
        console.log("页面可视化编辑 当前选择now_select:",_this.now_select);
      }catch (err){
        console.log("切换页面 报错",err)
      }
    }
    _this.data.初始化容器=function(){
      try{

        let father_dom=_this.$refs.write_dom;
        // console.log("father_dom:",_this.$refs.write_dom)
        //新建一个dom
        // console.log("初始化容器","新建一个dom");
        let new_dom=document.createElement('a_1_1_1_2_1');
        //设置dom属性 ref值为ref_obj
        // console.log("初始化容器","设置dom属性");
        new_dom.setAttribute('ref','ref_obj');
        //设置vue
        // console.log("初始化容器","设置vue");
        let vue_dct={'el':new_dom,data:{true:true,false:false,null:null,}};
        //设置vue传入参数
        // console.log("初始化容器","设置vue传入参数");
        new_dom.setAttribute(':deepcopy_data',"deepcopy_data"); 
        vue_dct.data.deepcopy_data={__style:{__edit_flag__:false},height:"auto",width:"auto",min_width:"100%",min_height:"100%",flex_grow:"1"};
        new_dom.setAttribute('dom_id', '-1');//组件id
        new_dom.setAttribute('con', '1');//容器属性
        //插入dom
        // console.log("初始化容器","插入dom",father_dom.appendChild)
        father_dom.appendChild(new_dom);  
        //渲染vue组件
        // console.log("初始化容器","渲染vue组件");
        let new_vue=new Vue(vue_dct);
        //获取到刚才渲染的vue对象
        // console.log("初始化容器","获取到刚才渲染的vue对象");
        let new_vue2=new_vue.$refs.ref_obj;
        // console.log("初始化容器","now_dom_dct",new_vue);
        _this.now_dom_dct['-1']={'dom':new_vue2.$el,"vue":new_vue2,'father_dom':father_dom}
      }catch (err){
        console.log("初始化容器失败",err);
      }
    }
    _this.data.设置move描边=function(event){
                  // 获取鼠标当前所在的元素
                  let now_tar= event.target;
                  // console.log("now_tar:",event.target)
                  if(now_tar==_this.old_tar){return}
                  let dom_id =now_tar.getAttribute('dom_id');
                  // console.log("now_tarx1",now_tar,dom_id,_this.now_dom_dct)
                  while(!_this.now_dom_dct.hasOwnProperty(dom_id)){
                    now_tar=now_tar.parentNode;
                    // console.log("now_tarx2",now_tar)
                    dom_id =now_tar.getAttribute('dom_id');
                    if (!now_tar) {
                        return null;
                    }
                  }
                  _this.old_tar=event.target;
                  try{_this.now_dom_dct[_this.old_move_dom_id].vue.data.edit_move_show=false}catch{}
                  // 如果有之前设置的元素，移除其样式
                  if (document.querySelector('.a_1_0_4_5_1_move_outline')) {
                      document.querySelector('.a_1_0_4_5_1_move_outline').classList.remove('a_1_0_4_5_1_move_outline');
                  }
                  // 为当前元素添加样式
                  _this.old_move_dom_id=dom_id;
                  now_tar.classList.add('a_1_0_4_5_1_move_outline');
                  try{_this.now_dom_dct[_this.old_move_dom_id].vue.data.edit_move_show=true}catch{}

    }
    _this.data.设置容器描边=function(event){
      let now_tar= event.target;
      // console.log("设置容器描边",'start');
      if(now_tar==_this.old_con_tar){return}
      if(now_tar.getAttribute('miaobian')){return}
      console.log(
        "容器描边-0:不是同一个dom,开始描边:\n\t\t",
        "当前dom:",now_tar,"\n\t\t",
        "之前dom:",_this.old_con_tar,"\n\t\t",
        ) 
      // console.log("设置容器描边",'开始循环匹配');
      let child_dom_id=null;
      let t_dom_id=null;
      while(1){
        let con_val =now_tar.getAttribute('con');
        if(!Number(con_val)>0){
          if(now_tar.getAttribute("dom_id")){
            child_dom_id=now_tar.getAttribute("dom_id")
          }
          now_tar=now_tar.parentNode;
        }else{
          t_dom_id=now_tar.getAttribute('dom_id');
          // console.log("_this.now_dom_dct[t_dom_id].vue.check_slot(event.target)",_this.now_dom_dct[t_dom_id].vue.check_slot(event.target),t_dom_id,event.target,)
          let ref_=_this.now_dom_dct[t_dom_id].vue.check_slot(event.target);
          if(ref_){
            console.log(
              "容器描边-1:匹配到插槽:\n\t\t",
              "插槽ref:",ref_,"\n\t\t",
              "容器id:",t_dom_id,"\n\t\t",
              ) 
            break;
          }else{
            child_dom_id=t_dom_id;
            now_tar=now_tar.parentNode;
          }
        }
      }
      
      console.log(
        "容器描边-2:移除旧插槽位置",
        ) 
      // console.log("设置容器描边",'获取容器id');
      let dom_id=now_tar.getAttribute('dom_id');
      // // 如果有之前设置的元素，移除其样式
      // console.log("设置容器描边",'移除其样式');
      if (document.querySelector('.a_1_0_4_5_1_move_outline')) {
          document.querySelector('.a_1_0_4_5_1_move_outline').classList.remove('a_1_0_4_5_1_move_outline');
      }
      try{_this.now_dom_dct[_this.old_move_dom_id].vue.data.edit_move_show=false}catch{}
      //删除旧的容器显示
      // console.log("设置容器描边",'删除旧的容器显示');
      try{_this.now_dom_dct[_this.old_father_id].vue.con_del();}catch (err){console.log("del_err",err);
}
      _this.old_con_dom=now_tar;
      _this.old_father_id=dom_id;
      console.log("_this.old_father_id",dom_id)
      _this.old_con_tar=event.target;
      // 为当前元素添加样式
      // console.log("设置容器描边",'为当前元素添加样式');
      now_tar.classList.add('a_1_0_4_5_1_move_outline');
      
        // 为当前元素添加样式
        _this.old_move_dom_id=dom_id;
        try{_this.now_dom_dct[_this.old_move_dom_id].vue.data.edit_move_show=true}catch{}
      //显示容器插入内容
      if(child_dom_id==dom_id){
        child_dom_id=null;
        _this.old_before_id=null;
      }else{
        _this.old_before_id=child_dom_id;
        console.log("child_dom_id",child_dom_id)
        if(child_dom_id){
          child_dom_id= _this.now_dom_dct[child_dom_id].dom;
        }
        console.log("child_dom_id end",child_dom_id)
      }
      
      console.log(
        "容器描边-3:显示方式:\n\t\t",
        child_dom_id?'插入到鼠标dom之前':"追加到父容器最后"
        ) 
      _this.old_con_ref=_this.now_dom_dct[_this.old_father_id].vue.check_slot(event.target);//插槽名称  一个组件可以拥有多个插槽 通过函数获取到插槽名称
      //显示当前容器要插入的位置
      console.log(
        "容器描边-4:描绘插槽位置:\n\t\t",
        "插槽ref:",_this.old_con_ref,"\n\t\t",
        "容器id:",_this.old_father_id,"\n\t\t",
        ) 
        try{

          _this.now_dom_dct[_this.old_father_id].vue.con_add({dom:child_dom_id,'ref':_this.old_con_ref});
          console.log(
            "容器描边-4:描绘完毕:\n\t\t",
            ) 
        }catch (err){
          console.log(
            "容器描边-4:描绘出错:\n\t\t",err
            ) 
        }
    }
    _this.data.删除move描边=function(event){
      // 如果有之前设置的元素，移除其样式
      if (document.querySelector('.a_1_0_4_5_1_move_outline')) {
          document.querySelector('.a_1_0_4_5_1_move_outline').classList.remove('a_1_0_4_5_1_move_outline');
      }
      
      try{_this.now_dom_dct[_this.old_move_dom_id].vue.data.edit_move_show=false}catch{}
      try{
        _this.now_dom_dct[_this.old_father_id].vue.con_del();
      }catch{}
      _this.old_con_tar=null;
      _this.old_father_id=null;
      _this.old_con_dom=null;

      _this.old_move_dom_id=null;
      _this.old_tar=null;
    }
    _this.data.删除容器插入位=function(){
      try{
        _this.now_dom_dct[_this.old_father_id].vue.con_del();
      }catch{}
      try{_this.now_dom_dct[_this.old_move_dom_id].vue.data.edit_move_show=false}catch{}
      _this.old_con_tar=null;
      _this.old_father_id=null;
      _this.old_con_dom=null;
      _this.old_move_dom_id=null;

    }

    _this.data.选择组件=function(key){
      //消除之前的选择事情
      // _this.data.clear_select();
      //添加当前的选择事件
      _this.data.start_select(key);
      
      window['浮动窗口当前显示'].set("前端组件属性编辑框");
      window['前端组件属性编辑框'].now_select=_this.now_select;
      window['前端组件属性编辑框'].key=key;
      }




    _this.data.移动前端组件up=function(event){
      
  }
_this.data.select_temp={};
_this.data.select_line={};
_this.data.start_select=function(key){
let selector=document.querySelector('.a_1_0_4_5_1_click_outline');
  if (selector) {
    selector.classList.remove('a_1_0_4_5_1_click_outline');
}
// console.log("设置容器描边",'为当前元素添加样式');
_this.now_dom_dct[key].dom.classList.add('a_1_0_4_5_1_click_outline');


}
_this.data.删除组件_更新父容器排序=function(组件id){
  let 组件info=_this.page_dict[组件id];
  let postput_con_lst={};
  let delete_obj=null;
  if(组件info.base_info.father_id=='-1'){
    delete_obj=`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info.con_dct.${组件info.base_info.ref}`;
    postput_con_lst={
      'path':`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info.con_dct`,
      data:{}
    }
    let con_lst=JSON.parse(JSON.stringify(_this.base_info.con_dct[组件info.base_info.ref]));
      con_lst.splice(con_lst.indexOf(组件id), 1);
    postput_con_lst.data[组件info.base_info.ref]=con_lst;
  }else{
    delete_obj=`page_config.dict.1.dict.${_this.now_select}.dict.1.page_dict.${组件info.base_info.father_id}.base_info.con_dct.${组件info.base_info.ref}`;
    postput_con_lst={
      'path':`page_config.dict.1.dict.${_this.now_select}.dict.1.page_dict.${组件info.base_info.father_id}.base_info.con_dct`,
      data:{}
    }
    let con_lst=JSON.parse(JSON.stringify(_this.page_dict[组件info.base_info.father_id].base_info.con_dct[组件info.base_info.ref]));
      con_lst.splice(con_lst.indexOf(组件id), 1);
    postput_con_lst.data[组件info.base_info.ref]=con_lst;
  }
  console.log("{postput_con_lst,delete_obj}",{postput_con_lst,delete_obj})
  return {postput_con_lst,delete_obj}
}
_this.data.删除组件_删除的组件数组=function(组件id){
  let del_lst=[组件id];
  let del_=[组件id];
  while (del_.length){
    let id__=del_.pop();
    let 被删除的组件数据=_this.page_dict[id__];
    console.log("删除组件_删除的组件数组11:",_this.page_dict,id__)
    if(被删除的组件数据.base_info.con){//如果是容器类组件 那么将保存在此容器内的组件全部删除
      let con_d=被删除的组件数据.base_info.con_dct;
      console.log("删除组件_删除的组件数组22:",_this.page_dict,id__)
      if(con_d){
        for(let k in con_d){
          for(let j=0;j<con_d[k].length;j++){
            del_lst.push(con_d[k][j]);
            del_.push(con_d[k][j]);
          }
        }
      }
    }
  }
  return del_lst
}
_this.data.删除组件=function(组件id){
  //修改存放此组件的 容器排序
  let up_lst=_this.data.删除组件_更新父容器排序(组件id);
  let del_lst=_this.data.删除组件_删除的组件数组(组件id);
  //发送请求
  let update_val={
    "type":"change_data",
    "type2":"删除前端组件",
    'temp_id':组件id ,
    'now_select':_this.now_select,
    "path":"page_config.dict.1",
    "data_type":"set_list",//类型 修改数据
    "postput":[up_lst.postput_con_lst],
    "delete":[{
      path:up_lst.delete_obj
    }],
    "delete2":[{
      "delete_before":`page_config.dict.1.dict.${_this.now_select}.dict.1.page_dict`,
      lst:del_lst
    }]
  }
  _this.data.全局配置对象.更新(update_val);
}
_this.data.弹出组件右击窗口=function(event){
  let 组件id=_this.old_move_dom_id;
  window.select3__({
    event,menu_data:[{"text":'删除'}],vue_name:"select3_____menu_default_item",callback:function(select){
      if(select==0){
        _this.data.删除组件(组件id);
      }
    }
  })
}
_this.data.选择组件=function(key){
console.log("选择组件",key);
//消除之前的选择事情
// _this.data.clear_select();
// //添加当前的选择事件
_this.data.start_select(key);

window['浮动窗口当前显示'].set("前端组件属性编辑框");
window['前端组件属性编辑框'].now_select=_this.now_select+'_'+key;
// window['前端组件属性编辑框'].key=key;
}


  _this.data.修改组件名称=function(key,name){
    console.log("修改组件名称",key,name)
    let out_id=key.split("_")[1];//this.now_select_temp
    
    let update_val={
      "type":"change_data",
      "type2":"修改组件名称",
      'key':key,
      name:name,
      'now_select':_this.now_select,
      "path":"page_config.dict.1",
      "data_type":"set_list",//类型 修改数据
      "postput":[{
        'path':`page_config.dict.1.dict.${_this.now_select}.page_dict.${out_id}`,
        'data':{'name':name}
      }]
    }
    _this.data.全局配置对象.更新(update_val);
  }
  _this.data.移动前端组件move=function(event){
    let data=_this.data.全局鼠标操作对象1.get_data({
      key:"移动前端组件"})
      let new_x=data.x+(event.clientX-data.mousex)/_this.data.scale;
      let new_y=data.y+(event.clientY-data.mousey)/_this.data.scale;
      if(new_x<0){new_x=0}
      if(new_y<0){new_y=0}
      if(new_x>Number(_this.data.width.replace("px",""))){new_x=Number(_this.data.width.replace("px",""))-10}
      if(new_y>Number(_this.data.height.replace("px",""))){new_y=Number(_this.data.width.replace("px",""))-10}
      a_1_0_4_5_1_dom_dct[data.key].vue.data.x=new_x;
      a_1_0_4_5_1_dom_dct[data.key].vue.data.y=new_y;
      _this.data.更新目标连线(data.key);
  }
  _this.sleep=function sleep(ms) {  
    return new Promise(resolve => setTimeout(resolve, ms));  
}  

_this.data._init_dct={};
_this.data.get_out_xy_in_xy=function(page_id){
  if(!_this.data._init_dct[page_id]){
    let page_id2=page_id.split("_")[1];
    console.log("_this.page_dict[page_id].name",_this.page_dict,page_id,page_id2)
    let obj=a_1_0_4_5_1_get_wh({
      'context':_this.page_dict[page_id2].name,
      'class':"a_1_0_4_5_1_class1 ddd"
    });
    let width=obj.width;
    let circle_style_left=width/2-6;
    let x=_this.page_dict[page_id2].x;
    let y=_this.page_dict[page_id2].y;
    _this.data._init_dct[page_id]= {
      in_xy:{x:x+circle_style_left,y:y-12},
      out_xy:{x:x+circle_style_left,y:y+24}
    }
  }
  return _this.data._init_dct[page_id]
}
    _this.data.绘制当前页面的数据=async function(){
      await a_1_0_4_5_1_create({
        页面id:_this.now_select,
        配置:全局配置对象.update_obj.data,
        _this:_this
      })
    }
    let getQueryParams=function() {  
      const queryParams = {};  
      const urlParams = new URLSearchParams(window.location.search);  
      for (const [key, value] of urlParams.entries()) {  
          queryParams[key] = value;  
      }  
      return queryParams; 
      
  }  
    _this.data.协同数据处理=function(obj){
      console.log("前端页面可视化界面 接收协同数据处理:",obj)
      if(obj.type2=='新增组件'){
        
        let info=JSON.parse(JSON.stringify(obj.postput[0].data.base_info));
        //创建组件
        let new_dom=document.createElement(info.temp_id+'_'+info.version);
        for (let k in info){
          if (k!='data'){
            new_dom.setAttribute(k,info[k]);
          }
        }
        let dom_id=obj.postput[0].path.split(".")
        dom_id=dom_id[dom_id.length-1];

        new_dom.setAttribute('dom_id',dom_id);//设置id
        new_dom.setAttribute('ref','ref_obj');//设置ref
        let project_info=getQueryParams();//获取项目信息
        let 项目所有者id=project_info.user_id;
        let 项目目录id=project_info.project_dir;
        let 项目id=project_info.project_id;
        let 页面id=_this.now_select;
        let 组件id=dom_id;
        new_dom.id=`id_${项目所有者id}_${项目目录id}_${项目id}_${页面id}_${组件id}`;
        let deepcopy_data=JSON.parse(JSON.stringify(info.data||{}));
        // console.log("新增组件1")
      if (obj.before_id) {
        if(!_this.now_dom_dct[obj.father_id].vue.return_slot_dom){
          _this.now_dom_dct[obj.father_id].vue.$refs[obj.ref_val].insertBefore(new_dom,_this.now_dom_dct[obj.before_id].dom);
        }else{
          let father_d=_this.now_dom_dct[obj.father_id].vue.return_slot_dom(obj.ref_val);
          father_d.insertBefore(new_dom,_this.now_dom_dct[obj.before_id].dom);
        }
      } else {
        if(!_this.now_dom_dct[obj.father_id].vue.return_slot_dom){
          _this.now_dom_dct[obj.father_id].vue.$refs[obj.ref_val].appendChild(new_dom);
        }else{
          let father_d=_this.now_dom_dct[obj.father_id].vue.return_slot_dom(obj.ref_val);
          father_d.appendChild(new_dom);
        }
        // 如果 child_dom 是 null，则将新元素添加到 father_dom 的末尾
      }
      // console.log("新增组件2")
      let vue_dct={'el':new_dom,data:{true:true,false:false,null:null}};
      //如果使用了vuetify 那么添加进来
      if(info.use_vue){
        for(let i=0;i<info.use_vue.length;i++){
          vue_dct[info.use_vue[i]]=window[info.use_vue[i]];
        }
      }
      // //设置vue传入参数
      new_dom.setAttribute(':deepcopy_data',"deepcopy_data");
      deepcopy_data.edit_flag=true;//设置为编辑属性
      vue_dct.data.deepcopy_data=deepcopy_data;
      let new_vue=new Vue(vue_dct);
      let new_vue2=new_vue.$refs.ref_obj;
      _this.now_dom_dct[dom_id]={'dom':new_vue2.$el,"vue":new_vue2,'father_id':obj.father_id,'ref_val':obj.ref_val}


      }else if(obj.type2=='更新前端组件属性'){
    if (obj.page_id==_this.now_select){
      console.log("前端可视化编辑界面   ---前端组件属性 开始")

      if(obj.temp2){
        
          let change_vue_obj=_this.now_dom_dct[obj.temp2.temp_id].vue.data;
          let key1=obj.temp2.key1;
          if(key1){
            if (key1[0]=='.'){
              key1=key1.slice(1);
            }
            let key1_lst=key1.split('.');
            for(let i=0;i<key1_lst.length;i++){
                change_vue_obj=change_vue_obj[key1_lst[i]];
            }
            _this.$set(change_vue_obj,obj.temp2.key2, JSON.parse(JSON.stringify(obj.value)));
          }
          _this.$set(change_vue_obj,obj.temp2.key2, JSON.parse(JSON.stringify(obj.value)));
      }else{
        let change_vue_obj=_this.now_dom_dct[obj.temp_id].vue.data;
        let key1=obj.key1;
        // console.log("change_vue_obj",change_vue_obj)
        if(key1){
          if (key1[0]=='.'){
            key1=key1.slice(1);
          }
          let key1_lst=key1.split('.');
          for(let i=0;i<key1_lst.length;i++){
              change_vue_obj=change_vue_obj[key1_lst[i]];
          }
          // console.log("change_vue_obj",change_vue_obj)
          // console.log("obj.key2",obj.key2)
          // console.log("obj.value",obj.value)
          _this.$set(change_vue_obj,obj.key2, obj.value);
        }
        _this.$set(change_vue_obj,obj.key2, obj.value);
      }
      
    console.log("前端可视化编辑界面   ---前端组件属性 更新完毕")
    _this.show_0_key=_this.show_0_key=='1'?'0':'1';
    }
  }else if(obj.type2=="添加前端组件属性_新增项"){
    if (obj.page_id==_this.now_select){
      console.log("_this.now_dom_dct[obj.temp_id]",_this.now_dom_dct[obj.temp_id])
      let path_before=obj.path_before;
      let path_before_lst=path_before.split(".");
      let change_vue_obj=_this.now_dom_dct[obj.temp_id].vue.data;
      let set_obj=_this.data.全局配置对象.update_obj.data;
      for (let i=0;i<path_before_lst.length;i++){
        set_obj=set_obj[path_before_lst[i]];
      }
      _this.$set(change_vue_obj,path_before_lst[path_before_lst.length-1],JSON.parse(JSON.stringify(set_obj)));
    }
  }else if(obj.type2=="添加前端组件属性_删除项"){
    if (obj.page_id==_this.now_select){
      console.log("_this.now_dom_dct[obj.temp_id]",_this.now_dom_dct[obj.temp_id])
      let path_before=obj.path_before;
      let path_before_lst=path_before.split(".");
      let change_vue_obj=_this.now_dom_dct[obj.temp_id].vue.data;
      let set_obj=_this.data.全局配置对象.update_obj.data;
      for (let i=0;i<path_before_lst.length-1;i++){
        set_obj=set_obj[path_before_lst[i]];
      }
      console.log("删除项",change_vue_obj,path_before_lst[path_before_lst.length-2],set_obj)
      _this.$set(change_vue_obj,path_before_lst[path_before_lst.length-2],JSON.parse(JSON.stringify(set_obj)));
    }
  }else if(obj.type2=="删除前端组件"){
    let del_lst=obj.delete2[0].lst;
    for(let i=0;i<del_lst.length;i++){
      _this.now_dom_dct[del_lst[i]].dom.parentNode.removeChild(_this.now_dom_dct[del_lst[i]].dom);
      delete _this.now_dom_dct[del_lst[i]];
    }
  }
      
    }
    _this.data.更新目标连线=function(key){
      // console.log("更新.")
      //获取当前页面id  和  组件id
      let temp_v=key.split("_");
      let page_id=temp_v[0];
      let temp_id=temp_v[1];
      if (page_id!==_this.now_select){return}//如果不是当前页面图 那么取消
      //获取目标入参位置
      let in_xy=window.a_1_0_4_5_1_dom_dct[key].vue.return_circle_xy2();
      let in_x=in_xy.x,in_y=in_xy.y;
      //获取目标出参位置
      let out_xy=window.a_1_0_4_5_1_dom_dct[key].vue.return_circle_xy1();
      let out_x=out_xy.x,out_y=out_xy.y;
      //获取目标 所有输出到入参的 id
      let in_dcts=_this.page_dict[temp_id].in;
      let out_dcts=_this.page_dict[temp_id].out;
      let out_lst=[];
      let in_lst=[];
      for (let k in in_dcts){
        let idx=page_id+'_'+in_dcts[k].in_id;
        out_lst.push([idx,window.a_1_0_4_5_1_dom_dct[idx].vue.return_circle_xy2()]);
      }
      for (let k in out_dcts){
        let idx=page_id+'_'+out_dcts[k].out_id;
        in_lst.push([idx,window.a_1_0_4_5_1_dom_dct[idx].vue.return_circle_xy1()]);
      }
      for(let i=0;i<in_lst.length;i++){
        window.a_1_0_4_5_1_line_dct[key+'=>'+in_lst[i][0]].vue.data.xy=JSON.stringify({x2:in_lst[i][1].x,y2:in_lst[i][1].y,x1:in_x,y1:in_y})
      }
      for(let i=0;i<out_lst.length;i++){
        // console.log("key+'=>'+out_lst[i][0]]",key+'=>'+out_lst[i][0])
        window.a_1_0_4_5_1_line_dct[out_lst[i][0]+'=>'+key].vue.data.xy=JSON.stringify({x1:out_lst[i][1].x,y1:out_lst[i][1].y,x2:out_x,y2:out_y})
      }
    }
    _this.data.删除目标连线=function(key){
      for(k in window.a_1_0_4_5_1_line_dct){
        if(k.includes(key)){
          window.a_1_0_4_5_1_line_del(k)
        }
      }
    }
    _this.data.初始化数据=function(obj){
      let base_info=obj.base_info;
      let data_v={};
      base_info['vue_name']='a_1_0_2_35_1';
      base_info['father_id']=_this.old_father_id;
      base_info['before_id']=_this.old_before_id;
      base_info['data2father']={"flag":false,"name":" _ ",flag2:false,father_id:""};
      base_info['ref']= _this.old_con_ref;//父组件插入的插槽名称
      base_info.css="";//组件的css
      base_info.js="";//组件的js
      if(base_info.con){//容器组件 存放子组件的排列顺序
        base_info.con_dct={};
      }
      //添加编辑专用 配置
      if(!base_info.data_info){
        base_info.data_info=[];
      }
      //如果组件是con2容器 那么显示body_data属性框
      if(base_info.con=='2'){
        base_info.data_info.unshift(0,
          {
            name: 'body_data',
            ch_name: '属性列表',
            note: "属性列表",
            default:[],
            type: "list_text",
          });
          data_v.body_data=[];
      }
      //如果组件是属性容器1
      if(base_info.father_data=='1'){
      base_info.data_info.unshift(0,
        {
          name: '__father_data',
          ch_name: '属性容器',
          note: "属性容器",
          type: "dict2",
          dict:[]
        });
        data_v.__father_data={};
      }
      


      base_info.data_info.unshift(0,
  
        {
          name: '__style',
          ch_name: '样式',
          note: "样式",
          type: "dict2",
          dict:[
        {
          name: '__edit_flag__',
          ch_name: '辅助开关',
          note: "可视化编辑模式下的一些辅助线",
          type: "bool",
          default: false,
          },
          {
            name: '__margin',
            ch_name: '外距',
            note: "外距",
            default: 'null',
            type: "select_eval",
            select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
            },
          {
          name: '__margin_x',
          ch_name: '外距-左右',
          note: "外距-左右",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
          {
              name: '__margin_y',
              ch_name: '外距-上下',
              note: "外距-上下",
              default: 'null',
              type: "select_eval",
              select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__margin_left',
          ch_name: '左外距',
          note: "左外距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__margin_right',
          ch_name: '右外距',
          note: "右外距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__margin_top',
          ch_name: '上外距',
          note: "上外距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__margin_bottom',
          ch_name: '下外距',
          note: "下外距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
          {
          name: '__padding',
          ch_name: '内距',
          note: "内距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
          {
              name: '__padding_x',
              ch_name: '内距-左右',
              note: "内距-左右",
              default: 'null',
              type: "select_eval",
              select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
          {
          name: '__padding_y',
          ch_name: '内距-上下',
          note: "内距-上下",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__padding_left',
          ch_name: '左内距',
          note: "左内距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__paddint_right',
          ch_name: '右内距',
          note: "右内距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__padding_top',
          ch_name: '上内距',
          note: "上内距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
        {
          name: '__padding_bottom',
          ch_name: '下内距',
          note: "下内距",
          default: 'null',
          type: "select_eval",
          select_list_eval: [-1,24,"${(i<0)?'null':(i+'')}","${(i<0)?'null':(i*4+'px')}"]
          },
          ]
        }
    
    )
      base_info.data_info.unshift(0,{
        "name": "var_name",
        "ch_name": "全局变量名",
        "default": "",
        "note": "通过windows.组件全局变量名 访问该vue.data",
        "type": "str"
      })
      data_v['var_name']='';
      data_v['__style']={
        __edit_flag__:true,
        __margin: 'null',
        __margin_x: 'null',
        __margin_y: 'null',
        __margin_right: 'null',
        __margin_left: 'null',
        __margin_top: 'null',
        __margin_bottom: 'null',
        __padding: 'null',
        __padding_x: 'null',
        __padding_y: 'null',
        __padding_left: 'null',
        __paddint_right: 'null',
        __padding_top: 'null',
        __padding_bottom: 'null',
    };
      if(base_info.data){
        let copy_d=JSON.parse(JSON.stringify(base_info.data));
        lhp_deepcopy1(data_v,copy_d);
      }
      base_info.data=data_v;
  
      if(!base_info.deepcopy_data){base_info.deepcopy_data={}}
      base_info.deepcopy_data['name']=base_info['name'];
      
    }
    _this.data.更新父容器排序=function(obj){
      //插槽排序
      let father_con_dct=null;
      let father_path=null;
      // console.log("更新父容器排序",1,_this.old_father_id);
      if(_this.old_father_id=='-1'){
        father_path=`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info.con_dct`;
        father_con_dct=_this.base_info.con_dct||{};
      }else{
        father_path=`page_config.dict.1.dict.${_this.now_select}.dict.1.page_dict.${_this.old_father_id}.base_info.con_dct`;
            // console.log(_this.page_dict,_this.old_father_id)
        father_con_dct=_this.page_dict[_this.old_father_id].base_info.con_dct||{};
      }
      // console.log("更新父容器排序",2,father_con_dct);
      if(!father_con_dct[_this.old_con_ref]){father_con_dct[_this.old_con_ref]=[]}
      if(!_this.old_before_id){father_con_dct[_this.old_con_ref].push('@add_index')}
      else{
          let index = father_con_dct[_this.old_con_ref].indexOf(_this.old_before_id);
          father_con_dct[_this.old_con_ref].splice(index, 0,"@add_index");
      }

      // console.log("更新父容器排序",3);
      return {
        path:father_path,
        data:father_con_dct,
      }
    }
    //上传更改数据
    //_this.data.新增组件
    _this.data.新增组件=function(event,info){
      
    let xy=_this.get_x_y2(event,"write_dom")
    console.log("拖拽进来的组件数据:",info)
    let base_info=JSON.parse(JSON.stringify(info));
    _this.data.初始化数据({
      base_info,
    })
    
      //   //更新数据
        let update_val={
          "type":"change_data",
          "data_type":"set_list",//类型 修改数据
          "type2":"新增组件",
          "path":"page_config.dict.1",
          "father_id":_this.old_father_id,//父组件id
          "before_id":_this.old_before_id,//在哪一个兄弟节点前面
          "ref_val":_this.old_con_ref,//父组件的哪一个插槽的ref
          // 'info':JSON.parse(JSON.stringify(info)),//要插入的数据
          // page_config.dict.1.dict.页面id.dict.1
          update_params:[
            {
              name:'@add_index',
              path:`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info.index`,//数据路径
              use:'++s'
            }
          ],
          "postput":[
            //新增的组件
            {
              'path':`page_config.dict.1.dict.${_this.now_select}.dict.1.page_dict.@add_index`,
              'data':{
                "base_info":base_info,
                "dict":{}
              }
            },
            //容器排序
            _this.data.更新父容器排序(),
            //更新索引
            {
              'path':`page_config.dict.1.dict.${_this.now_select}.dict.1.base_info`,
              'data':{"index":"@add_index"}
            },
          ],
        }
        _this.data.全局配置对象.更新(update_val);
        window.上传服务器时间=new Date().getTime();
    }
    //添加新的组件
    // _this.data.add();
    //添加新的连接
    
    //清空所有内容

    //按照选择的










    this.project_post=request______({method:'post',url:'/run_page',error_run_func:function(data){if (data.error_code==1){window.location.href = '/login';}}})
    this.url_params=get_url_params()

      if (_this.show_flag){_this.data.show_flag=_this.show_flag}
      // console.log('test',_this.$el)
      _this.data.set_template=function(template_name){
        console.log("数据库html可视化 设置template_name",template_name);
        _this.data.now_template_name=template_name
        _this.show_template()
      }
    _this.data.change_db_indexr=function(db_indexr){
      console.log("数据库html可视化 设置dbindexr",db_indexr);
      _this.data.db_indexr=db_indexr}
    
    _this.data.init_scroll=function(){

      var scrollableElement = _this.get_ref("scroll");
  window.scrollableElement=scrollableElement;
      // 确保元素有滚动条  
      if (scrollableElement.scrollHeight > scrollableElement.clientHeight) {  
      // 设置滚动位置  
        scrollableElement.scrollTop =(scrollableElement.scrollHeight - scrollableElement.clientHeight) / 2;
      }
      if(scrollableElement.scrollWidth>scrollableElement.clientWidth){
        scrollableElement.scrollLeft = (scrollableElement.scrollWidth-scrollableElement.clientWidth)/2; 
      }
    }
    
  document.addEventListener('click', this.handleGlobalClick);
    //初始化滚动轴
    ttime3(_this,'scroll',_this.data.init_scroll);

// 辅助函数：获取元素的scale值
function getTransformScale(el) {
  var transform = window.getComputedStyle(el).transform || el.style.transform || 'none';
  var matrix = transform.match(/^matrix3d\((.+)\)$/);
  if (matrix) {
      return parseFloat(matrix[1].split(', ')[0]) / 1; // sx
  } else {
      var matrix2d = transform.match(/^matrix\((.+)\)$/);
      return matrix2d ? parseFloat(matrix2d[1].split(', ')[0]) : 1; // 默认scale为1
  }
}


    _this.data.设置全屏=function(
    ){
      _this.old_title_display=_this.$refs.title.style.display;
      _this.$refs.title.style.display='none';
      _this.old_end_display=_this.$refs.end.style.display;
      _this.$refs.end.style.display='none';

      let oldStyle = window.getComputedStyle( _this.$refs.write_dom);
      _this.write_dom_old_style_oldWidth = parseFloat(oldStyle.width);
      _this.write_dom_old_style_oldHeight = parseFloat(oldStyle.height);
      _this.write_dom_old_style_oldLeft = _this.$refs.write_dom.offsetLeft; // 注意：offsetLeft 返回的是整数，单位px
      _this.write_dom_old_style_oldTop = _this.$refs.write_dom.offsetTop; // 同上
      _this.write_dom_old_style_oldMarginTop = parseFloat(oldStyle.marginTop);
      _this.write_dom_old_style_oldMarginLeft = parseFloat(oldStyle.marginLeft);
      _this.write_dom_old_style_oldScale = _this.$refs.write_dom.style.scale; // 获取当前的scale值
      _this.$refs.write_dom.style.width = '100%';
      _this.$refs.write_dom.style.height = '100%';
      _this.$refs.write_dom.style.left = '0px';
      _this.$refs.write_dom.style.top = '0px';
      _this.$refs.write_dom.style.marginTop = '0px';
      _this.$refs.write_dom.style.marginLeft = '0px';
      _this.data.更改scale(100);


      window.设置前端编辑区全屏模式();

    }
    _this.data.退出全屏=function(){
      _this.$refs.title.style.display=_this.old_title_display;
      _this.$refs.end.style.display=_this.old_end_display;
      _this.$refs.write_dom.style.scale = _this.write_dom_old_style_oldScale; // 修改scale值
      _this.$refs.write_dom.style.width =  _this.write_dom_old_style_oldWidth+'px';
      _this.$refs.write_dom.style.height =  _this.write_dom_old_style_oldHeight+'px';
      _this.$refs.write_dom.style.marginTop =  '20px';
      _this.$refs.write_dom.style.marginLeft =  '20px';
      window.退出前端编辑区全屏模式();
      _this.data.更改scale(_this.base_info.scale);
      _this.data.scale_key=_this.data.scale_key=='2'?'1':'2';

    }
    _this.data.开全局辅助=function(){
      //恢复所有dom的__style.__edit_flag__值
        for(let k in _this.data.___全局辅助记录值___){
          _this.now_dom_dct[k].vue.data.__style.__edit_flag__=_this.data.___全局辅助记录值___[k];
        }
    }
  _this.data.关全局辅助=function(){
    //记录所有dom的__style.__edit_flag__值 然后全部更改为false
    _this.data.___全局辅助记录值___={};
    // _this.now_dom_dct[dom_id]={'dom':new_vue2.$el,"vue":new_vue2,'father_id':obj.father_id,'ref_val':obj.ref_val}
    for(let k in _this.now_dom_dct){
      _this.data.___全局辅助记录值___[k]=_this.now_dom_dct[k].vue.data.__style.__edit_flag__;
      _this.now_dom_dct[k].vue.data.__style.__edit_flag__=false;
    }

  }
  },
  beforeDestroy() {
    // 确保在组件销毁前移除监听器
    document.removeEventListener('click', this.handleGlobalClick);
  },
} 
  );
  


//组件传入后
